KIPP+

Da ja der Google+ Hype ungebrochen ist und somit auch der +1 Button immer mehr Einzug hält hier einmal drei Wege den Button in die eigene WebsiteBaker Installation zu integrieren.

1) Der klassische Weg

Sie besuchen die von Google erstellte Seite mit dem Buttongenerator , generieren sich den entsprechenden Code und binden diesen entsprechend in Ihr Template ein.

2) Einbindung mittels Droplet

Im italienischen Bereich des WebsiteBaker-Forums hat der User LonelyWolf folgendes Droplet gepostet:

Name: googleplus1
Beschreibung: google+1 Button
Code

$button = '<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: \'de\'}</script>';
$button .= '<div id="plusone-div" class="plusone"></div>';

$button .= '<script type="text/javascript">';
$button .= 'gapi.plusone.render(\'plusone-div\',{"size": "small", "count": "true"});';
$button .= '</script>';

return $button;

Verwendung: [[googleplus1]]

Ich habe die Sprache im Droplet schon entsprechend auf deutsch gesetzt. In Zeile 5 des Codes können Sie unter  “Size” die Größe des Buttons (small, medium, tall) bestimmen und den Counter (true, false) ein- bzw. ausschalten.

Das Droplet kann an jeder beliebigen Stelle, global im Template oder in einzelnen Wysywig-Abschnitten, gesetzt werden.

3) Einbindung / Installation als Snippet

KFSoft  hat ein jQuery Plugin für den +1 Button erstellt welches mich dazu animierte das ganze als Snippet für WebsiteBaker zusammen zustellen. Das Snippet kann einfach im Backend über Erweiterungen installiert werden und sofern jQuery nach meinem Tutorial eingebunden ist erscheint der +1 Button in der oberen rechten Ecke im Frontend Ihres Templates.

Wie in der Demo von KFSoft ersichtlich gibt es 4 feste Positionen und eine frei wählbare. Wenn Sie die Position des Buttons verändern wollen öffnen Sie die frontend.js des Snippets mit Ihrem Lieblingseditor (z.B. Notpad++). Ich habe dort alle Positionen aufgenommen jedoch entsprechend auskommentiert. Die Optionen die Sie in der frontend.js zur Verfügung haben habe ich soweit alle beschrieben, kommentieren Sie einfach die entsprechenden Zeilen die Sie benötigen ein oder aus. Die Position können Sie mit den entsprechenden CSS Angaben in der frontend.js beeinflussen. Es sollte selbsterklärend sein.

Download
Downloaded 56 times