Making superawesome websites that don't suck!
Vout is nothing more than my personal playground where i can show my work and share my thoughts about webdesign.
1934
2398
Google +1 button op je website zonder plugin.
De Google +1 button is amper 2 weken beschikbaar in Nederland maar je komt hem al op iedere website tegen. En het loont ook want volgens bijvoorbeeld dit artikel wordt de +1 button vaker gebruikt dan bijvoorbeeld een Twitter of Facebook button.
Nu kun je om de +1 button te installeren op je website een plugin gaan downloaden en die zal naar alle waarschijnlijkheid zijn werk ook wel doen. Voor WordPress bijvoorbeeld zijn er velen te verkrijgen en ook voor Joomla is er wel het één en ander te vinden. De vraag is of je echter wel een plugin wil installeren voor zoiets simpels als een Google +1 button.
Wanneer zou je wel een plugin installeren?
Wanneer je ook meteen Twitter, Facebook en Hyves links wil integreren zou het de moeite kunnen zijn een plugin te installeren. Ik heb die behoefte echter niet aangezien de Google +1 nu al veel meer wordt gebruikt dan de eerdere genoemden en dit in de toekomst alleen nog maar toe zal nemen. Ik zie het nut dus niet meer van een Twitter / Facebook share button om nog maar te zwijgen over de implementatie van een Huves button.
Mocht je de behoefte hebben aan configuratie opties kan het ook lonen om een plugin te installeren. Ik heb die behoefte niet want ik wil de button bijvoorbeeld op dit WordPress blog alleen maar bij ‘posts‘ hebben en niet bij de zogenaamde ‘pages‘. Het nut van een Google +1 button op een contact pagina ontgaat mij namelijk een beetje. Daarnaast mag de button bij iedere post en mocht ik een bepaalde categorie uit willen sluiten kan ik dat altijd nog middels een stukje PHP code doen.
De laatste en de beste reden waarom je een plugin zou willen installeren is omdat je geen enkele ‘technische’ kennis hebt en bijvoorbeeld niet eens weet waar je <head> tag te vinden is in een template.
Waarom kiezen voor het implementeren in de template?
Om de doodsimpele reden dat dit zorgt voor de minste overhead. De simpelste plugin die ik kon vinden bestond nog altijd uit een factor 20 meer aan code dan de 2 regels die je volgens Google daadwerkelijk nodig hebt. Daarnaast zorgt het implementeren in de template NOOIT voor problemen met een upgrade en weet je precies wat voor code er gebruikt wordt.
Implementeren van de Google +1 button op je WordPress website zonder plugin…
Als eerste gaan we bepalen hoe groot de button moet zijn, of we wel of geen tellingen willen laten zien, welke landcode we willen gebruiken e.d. en dat doen we op de Google +1 button pagina.
Wanneer we alle instellingen hebben gemaakt zien we op deze pagina een stukje code staan (Zie bovenstaande afbeelding onder de tekst ‘Kopieer de volgende code en plak deze in uw site:’) welke geplaatst moet worden op de site.
Als eerste gaan we de javascript code plaatsen.
Open hiervoor de header.php van je template, zoek de afsluitende </head> tag en plaats vlak daarvoor de volgende code;
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'nl'}
</script>Bovenstaande code is zoals ik hem hier op Vout ook gebruik en kan eventueel gekopieerd worden.
Het plaatsen van de daadwerkelijke button.
Nu de javascript code ingeladen wordt kunnen we gaan bepalen waar we de +1 button willen hebben. Onderstaande code zorgt er voor dat de Google +1 button linkt naar de pagina waarop de Google +1 button is gebruikt. Waar je deze code plakt is afhankelijk van waar je de button wilt implementeren.
<g:plusone size="small" href="<?php the_permalink(); ?>"></g:plusone>
Zoals te zien is er op de standaard code die Google genereert een aanvulling gemaakt welke de pagina link invoegt. Hiervoor gebruiken we ‘<?php the_permalink(); ?>‘.
Waar bovenstaande code ingevoegd wordt is afhankelijk van waar je de button geplaatst wil hebben. Ik heb de button bijvoorbeeld alleen bij ‘posts‘ en niet bij alle andere pagina’s. Mocht je dat echter wel willen zou je er ook voor kunnen kiezen de +1 button in je ‘loop.php‘ op te nemen en bijvoorbeeld in je pagina titel te zetten en rechts uit te lijnen. In dat geval even een ‘‘ zetten en deze rechts uitlijnen middels CSS.
Belangrijk is dat de button in ieder geval in het zicht staat… hij krijgt tenslotte pas waarde wanneer hij ook veelvuldig gebruikt wordt.
Top! Heb je toevallig ook eenzelfde handleiding voor het plaatsen van een Facebook en Twitter button?
Groet,
Wilco
@Wilco
Helaas niet. Zal binnenkort eens kijken wanneer ik weer wat meer tijd heb of ik daar ook niet wat voor in elkaar kan flansen ;-)