Facebook und Flattr Button für T3BLOG

Die Verwendung der T3BLOG Erweiterung für TYPO3 zum bloggen zu verwenden ist nicht gerade die einfachste Möglichkeit, seine Inhalte ins Web zu bringen. Während große Blogsoftware, wie Wordpress, leicht zu installierende Erweiterungen für jede Anforderung bietet, ist bei T3BLOG mehr Bastelarbeit nötig.

Auf der anderen Seite: es ist TYPO3! Und damit haben wir mit Typoscript schon ein mächtiges Werkzeug mit dem sich viele Anforderungen realisieren lassen. Folgend also zwei Snippets, mit dem sich ein Facebook-Like- und der Flattr Button ohne weitere Extension in den Blog integrieren lassen.

Wie das Ganze dann aussieht, sieht man hier auf der Seite - dort lassen sich die Knöpfe natürlich auch ausprobieren :)

Der Facebook-Like Button

Für den Facebook Like Button habe ich mich von Fabrizio inspirieren lassen und dessen Vorschlag für das T3Blog angepasst. Das Typoscript wird zunächst unter lib. erzeugt um es danach einfach auf Übersichts- und Singleansicht einbinden zu können.

lib.facebookLikeButton = COA
lib.facebookLikeButton {
  10 = TEXT
  10.data = TSFE:baseUrl
  20 = TEXT
  20.field = blogUrl
  wrap = <span class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?href=|&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=dark&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></span>
}

Facebook-Like Button mit T3BLOG URL

Der Flattr Button

Das Typoscript für den Flattr-Button sieht etwas komplizierter aus. Das liegt daran, dass neben der URL auch Informationen des Beitrags wie Titel und Beschreibung und natürlich auch die eigene Flattr-ID übertragen werden müssen.

Interessant wird es in Zeile 8, dort tragt ihr die flattr ID ein, welche ihr auf der Flattr-Seite findet. In Zeile 12 wird wiederum die URL generiert. In Zeile 23 könnt ihr anstatt Text auch eine andere Flattr Kategorie eintragen (beispielsweise für ein Bild-Blog).

Unter der TS-Nummer 30 wird der Title aus dem T3Blog besorgt und im Block 40 wird die Beschreibung erzeugt, indem der Original-Inhalt des Blogeintrags von seinem HTML befreit und auf 500 Zeichen gekürzt wird.

lib.flattrButton = COA
lib.flattrButton {
  5 = HTML
  5.value = <a class="FlattrButton"
  
  10 = TEXT
  10 {
    value = <DEINE-FLATTR-ID>
    noTrimWrap = | rev="flattr;uid:|;category:text;button:compact;" |
  }

  20 = COA
  20 {
    10 = TEXT
    10.data = TSFE:baseUrl
    20 = TEXT
    20.field = blogUrl
    wrap = href="|"
  }

  25 = TEXT
  25 {
    value = category="text" lang="de_de"
    noTrimWrap = | | |
  }

  30 = TEXT
  30 {
    field = title
    stdWrap.stripHtml = 1
    noTrimWrap = | title="|">|
  }

  40 = COA
  40 {
     10 < plugin.tx_t3blog_pi2.blogList.single.10.10.10.20
    10.stdWrap.stripHtml = 1  
    stdWrap.substring = 0,500
  }

  50 = HTML
  50.value = </a>
}

Flattr Button für T3BLOG

Für den Flattr Button ist so wie ich ihn hier eingebunden habe noch etwas Javascript nötig, welches im Header der Seite untergebracht wird:

page.headerData.1234 = TEXT
page.headerData.1234.value (
<script type="text/javascript">
    (function() {
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
        
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
        
        t.parentNode.insertBefore(s, t);
    })();
</script>
)

Buttons in das T3BLOG integrieren

Damit ist alles zusammen und die Buttons müssen nur noch in das T3BLOG integriert werden. In diesem Fall binde ich die Buttons unter jedem Artikel in der Übersicht und unter der Singleansicht ein. Das hier gezeigte Typoscript passt zur Widget-Variante des Blogs.

plugin.tx_t3blog_pi2.blogList.listItem {
    20.55 = COA
    20.55 {
      5 = HTML
      5.value = <br><div class="blog-facebookButton">      
      10 < lib.facebookLikeButton
      20 = HTML
      20.value = </div><div class="blog-flattrButton">
      30 < lib.flattrButton
      40 = HTML
      40.value = </div>
    }
  }

Einbinden der Buttons in der Liste

plugin.tx_t3blog_pi2.blogList.single {
    10.15.55 = COA
    10.15.55 {
      5 = HTML
      5.value = <br><div class="blog-facebookButton">      
      10 < lib.facebookLikeButton
      20 = HTML
      20.value = </div><div class="blog-flattrButton">
      30 < lib.flattrButton
      40 = HTML
      40.value = </div>
    }

  }

Einbinden der Buttons auf der Einzelansicht