Ventil FeelFree

Google´s neuer +1 Button soll dem Besucher der Seite die Möglichkeit geben, eine besonders hilfreiche oder gute Seite weiter zu empfehlen. Seit dem 1.6.2011 wird der Button neben den Suchergebnissen in den SERP mit der Anzahl der Empfehlungen angezeigt.

Zunächst sieht der Einbau des Plusone-Botton von Google recht trivial aus.

Mit Google´s +1-Generator konfiguriere ich den Button nach meinen Wünschen und erhalte einen Tag für meine HTML-Datei und einen zum Laden des JavaScript.

Google´s Plusone-Generator

Bei mir sieht das Ergebnis des Plsuone-Generators so aus:

<!-- Dieses Tag in den Head-Bereich oder direkt vor dem schließenden Body-Tag einfügen -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
 {lang: 'de'}
</script>

<!-- Dieses Tag dort einfügen, wo die +1-Schaltfläche dargestellt werden soll -->
<g:plusone size="medium"></g:plusone>

Einfügen in Templavoila-Vorlage

Als Position für den Button nehme ich ein Div der Klasse rootline aus meiner Templavoila-Vorlage (ins Setup des Roottemplates):

lib.rootline = COA
lib.rootline {
   wrap = <div id="rootline">|</div>
   10 = COA
   10 {
      wrap = <g:plusone size="medium" count="false">|</g:plusone>
      }
   ...

JS-Datei einbinden

Entweder wird die JS-Datei direkt in die Templavoila-Vorlage vorzugsweise über das schließende Body-Tag eingebunden:

<script src="https://apis.google.com/js/plusone.js" type="text/javascript">
  {lang: 'de'}</script>
</body>

Alternativ Einbinden per Typoscript (ins Setup des Roottemplates):

page.footerData.661 = TEXT
page.footerData.661.wrap (
 <script src="https://apis.google.com/js/plusone.js" type="text/javascript">
 {lang: 'de'}</script>
)

Scriptmerger (Danke an Stefan Galinski)

Der Scriptmerger entfernt unglücklicherweise die Lang-Angabe, so dass englischer Text erscheint. Mit dieser Konfiguration des Scriptmerger wird Workaround geschaffen (in Konstanten des Roottemplate):

plugin.tx_scriptmerger {
css { enable = 1
addContentInDocument = 0
# minification
minify {
enable = 1
ignore = \.min\.
}
# gzip compression
compress {
enable = 1
ignore = \.gz\.
}
 # merging
merge {
enable = 1
ignore =
}
 }
 javascript {
enable = 1
parseBody = 0
addBeforeBody = 1
doNotRemoveInDocInBody = 1
addContentInDocument = 0
# minification
minify {
enable = 1
useJSMinPlus = 0
ignore = \?,\.min\.,plusone\.js
}
 # gzip compression
compress {
enable = 1
ignore = \?,\.gz\.,plusone\.js
}
 # merging
merge {
enable = 1
ignore = \?,plusone\.js
}
}
}

Mit dieser Konfiguration des Scriptmerger werden JS-Dateien innerhalb des Body-Tag unberührt gelassen. Um die hilfreichen Vorteile zun erhalten, dürfen JS-Dateien also nicht im Body enthalten sein.

Bei der Extension perfectlightbox zum Beispiel geht das mit dieser Konfiguration:

plugin.perfectlightbox.libraryToUse = jquery
plugin.perfectlightbox.includeJSLibrarys = 1
plugin.perfectlightbox.bodyScripts = 0
plugin.perfectlightbox.resizeSpeed = 0

+1 auf FeelFree Consult

Plusone auf FeelFree Consult

Verwandte Beiträge:

1. Google´s Plusone modifiziert
2. TYPO3-Newsletter mit Templavoila
3. TYPO3 4.6: Systemextension form
4. TYPO3 Rahmen
5. TYPO3 – Fragezeichen statt Banner