MediaAnalys Teknikblogg

En guide till Google+ Button

Skrivet av Jimmy i kategorin Google

Eftersom sociala medier är det som just nu är ”hett” inom sökmotoroptimering lönar det sig att förenkla för dina användare att länka till din sida från sina nätverk. Detta kan man göra genom diverse plugins, knappar och script för de olika sociala nätverken, men i detta inlägg ska vi fokusera på ett av dem: Google Plus.

Google har gjort det mycket lätt att inkludera en knapp på din hemsida, de har till och med lagt ut ett verktyg för att hjälpa dig som du hittar här: Google Plus Button

Där väljer man enkelt storlek och funktionalitet på sin knapp och får fram källkod som man kan klistra in på sin sida. Ett typiskt exempel kan se ut så här:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

Detta ger en liten smidig knapp som ser ut så här.

Nu erbjuder Google även en hel del extra möjligheter att justera din knapp. Det första man bör göra är att lägga till en url, så att man är säker på vilken sida man använder. Detta gör man genom att lägga till attributet href i knappen, så här:

<g:plusone href="http://www.exempel.com"></g:plusone>

Som standard visas en liten pratbubbla bredvid knappen som visar hur många som klickat på knappen innan. Vill man inte visa detta, om man till exempel har många sidor som visar noll,  använder man argumentet annotation, som kan vara antingen none eller inline. Om man använder none visas inget och om man använder inline visas lite mer information.

<g:plusone annotation="none"></g:plusone>

JavaScriptet som inkluderas kan laddas asynkront för att sidan ska laddas snabbare. Då byter man ut scriptet ovanför knappen mot följande kod:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Denna kod lägger man med fördel i slutet av sidan, strax innan </body> för att undvika fördröjningar i sidvisningen.

Du kan läsa mer om alla möjligheter som finns på Googles sida för utvecklare.