Widgeturi pentru reţele de socializare – Google +

Dacă tot mi-am pus noi zorzoane (butoane G+, Twitter şi FB) pe blog, m-am gândit că n-ar strica, evident pentru aceia pe care i-am convins nu demult să-şi deschidă blog, dacă, plin de generozitate, încerc să le economisesc timp preţios. Prin urmare, câteva indicaţii succinte, însă nepreţuite, referitoare la modalităţile de includere în paginile blogului a câtorva dintre cele mai reprezentative widgeturi Google, Twitter şi Facebook.

Pentru că n-am de gând să scriu prea mult, voi trata subiectul în trei episoade, azi vorbim despre butoanele G+. Pentru includerea acestora în paginile blogului mai întâi trebuie accesată pagina „Google developers”. Căutaţi apoi în stânga opţiunea websites. Aici vă stau la dispoziţie, între multe altele:

Butonul +1, căruia îi puteţi schimba aspectul, uzând de cele patru mărimi disponibile şi trei moduri de afişare. Codul pe care trebuie să-l puneţi în sidebarul blogului este generat imediat (n-aveţi cum să nu-l observaţi), iar în continuare procedura este simplă: copy de aici şi "paste" în blog.

Pentru un buton standard-inline, codul generat este de forma:

<!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone" data-annotation="inline" data-width="200"></div>

<!-- Place this tag after the last +1 button tag. -->

<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>

Rezultatul va arăta aşa:

Pentru butonul standard-bubble, codul este:

<!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone"></div>

<!-- Place this tag after the last +1 button tag. -->

<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>

Rezultatul în pagina blogului fiind acesta:

Un buton G+ simplu, echivalentul combinaţiei standard-none are codul:

<!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone" data-annotation="none"></div>

<!-- Place this tag after the last +1 button tag. -->

<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>

Iar imaginea pe blog este următoarea:

Butonul follow, permite, de asemenea, alegerea formatului de afişare, mic, mediu sau mare. Astfel, se poate opta pentru:

Buton mediu-orizontal, codul acestuia fiind de forma:

<!-- Place this tag where you want the widget to render. -->

<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/106552949756047860545" data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->

<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>

Observaţie: înlocuiţi şirul "106552949756047860545" (scris cu roşu), care reprezintă ID-ul profilului meu, cu propriul ID Google.

În pagină, rezltatul va arăta aşa:

Butonul mediu-vertical are codul:

<!-- Place this tag where you want the widget to render. -->

<div class="g-follow" data-annotation="vertical-bubble" data-height="20" data-href="//plus.google.com/106552949756047860545" data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->

<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>

Observaţie: rămâne valabilă observaţia anterioară, referitoare la ID profil Google.

Rezultatul pe blog ar trebui să fie acesta:

Pentru un buton de urmărire simplu este necesar codul:

<!-- Place this tag where you want the widget to render. -->

<div class="g-follow" data-annotation="none" data-height="20" data-href="//plus.google.com/106552949756047860545" data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->

<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>

Observaţie: nu uitaţi să folosiţi în locul şirului de cifre scris cu roşu ID-ul propriului profil Google.

Pe blog (în sidebar) ar trebui să vă apară:

Dacă vreţi să păreţi mai sofisticaţi cu siguranţă veţi fi tentaţi să folosiţi insigna google. Puteţi alege formatul de afişare, precum şi dimensiunea.

Astfel, pentru Insigna google tip portret codul este următorul:

<!-- Place this tag where you want the widget to render. -->

<div class="g-person" data-width="180" data-href="//plus.google.com/106552949756047860545" data-showcoverphoto="false" data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->

<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>

Nota bene: în locul şirului de cifre cu roşu puneţi propriul ID de profil google.

Rezultatul arată aşa:

Insigna google în variantă "landscape" are următorul cod:

<!-- Place this tag where you want the widget to render. -->

<div class="g-person" data-href="//plus.google.com/106552949756047860545" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->

<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>

Nota bene: înscrieţi în locul şirului de cifre scris cu roşu propriul ID google.

În sidebarul blogului apare ceva de genul:

Cam atât pentru azi. Totuşi, pe final să recapitulăm:

• Pentru butonul +1 accesaţi adresa: https://developers.google.com/+/web/+1button/

• Pentru butonul follow adresa este: https://developers.google.com/+/web/follow/

• Insigna google o puteţi lua de la adresa: https://developers.google.com/+/web/badge/

Drept bonus pentru aceia care au ajuns cu lectura până în acest punct vă mai vând dau un pont. Accesaţi adresa http://www.gplusdata.com, apoi în bara de căutare scrieţi-vă numele sub care sunteţi înregistraţi în Google (profil sau pagină). Veţi putea observa date despre profilul personal şi pentru un plus de aroganţă pe blog puteţi lua codul unui widget, în fapt o insignă care specifică cifra aşa-numitului "PlusKred", adică o reprezentare numerică a influenţei profilului personal pe G+. Minunăţia asta arată cam aşa (culoarea se poate alege):

Data viitoare, probabil mâine, vorbim despre Twitter.