luni, 27 februarie 2012

Buton Facebook "Imi Place" (Like) in fiecare postare pe Blogger

Facebook!!! Toata lumea are cont Facebook si toata lumea vrea sa dea "Imi Place" (Like).
Pentru bloggeri insa, Facebook inseamna promovarea articolelor in reteaua sociala si ce mod mai bun de promovare sa fie decat sa-ti lasi vizitatorii sa trimita articolele tale pe Facebook.

Unul din modurile in care link-ul tau poate apare in retea este sa-ti instalezi un buton "Imi Place" (Like) si sa lasi vizitatorii sa-l apese atunci cand articolul scris de voi este pe placul lor.

Despre un widget care care contine butonul "Imi Place" (Like) am mai scris, dar widget-ul venea cu un chenar si de multe ori nu era ceea ce vroiam noi. Astazi am sa va arat cum sa instalati doar butonul "Imi Place" (Like) in toate paginile blogului. El va functiona independent pentru fiecare postare si numarul de Like-uri va fi contorizat pentru fiecare articol in parte.


In postare butonul va arata astfel:





Instalarea butonului.

1. Intrati la Design --> Editati html (in interfata veche) si faceti o copie de siguranta a sablonului.

2. Bifati casuta de extindere a codului sablonului.

3. Cu ajutorul combinatiei de taste Ctrl + F gasiti acest cod:

<data:post.body/>

Acest cod reprezinta postarea voastra, articolul vostru. Orice cod adaugat deasupra lui face ca obiectul introdus sa apara deasupra postarii, adica sub titlul postarii si orice cod adaugat dupa el face ca obiectul introdus sa apara, asa cum cred ca ati ghicit, sub postare.

4. Odata gasit, trebuie sa alegeti daca vreti ca butonul sa apara sub postare sau deasupra ei si sa copiati codul de jos:

<!-- Cod buton like pt Facebook -->
<div style='float:left;padding:15px 5px 5px 0;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=25&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:25px;'/>
</div>
<!-- Cod buton like pt Facebook -->

Codul butonului este prins intre 2 atribute CSS care ajuta la o pozitionare mai buna a butonului. Aceste atribute sunt: float:left; si padding:15px 5px 5px 0;

 float:left;  ajuta la pozitionarea butonului in stanga sau in dreapta. Cu "left" va apare in stanga iar cu "right" in dreapta.

padding:15px 5px 5px 0;   ajuta la crearea unor distante fata de buton. Puteti modifica valorile cum doriti. Valorile corespund astfel: distanta sus, dreapta, jos si stanga.

In modul cum este construit codul, butonul va aparea in toate postarile si paginile statice, inclusiv in pagina de inceput a blogului. Daca vreti sa apara asa, puteti previzualiza si daca va place, puteti salva sablonul.
Daca vreti ca el sa apara doar in postari si pagini statice va trebui sa-i aplicam conditionarea potrivita.

5. Conditionarea pentru postari si pagini statice se face adaugand la cod tagurile de condionare potrivite:

<!-- Cod buton like pt Facebook -->
<b:if cond='data:blog.url == data:post.url'>
<div style='float:left;padding:15px 5px 5px 0;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=25&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:25px;'/>
</div>
</b:if>
<!-- Cod buton like pt Facebook -->

Liniile scrise cu rosu reprezinta conditionarea pentru postari si pagini statice. Daca doriti alta conditionare vezi articolul despre taguri de conditionare pe blogger.
Atributele Css se pot modifica asa cum am aratat la punctul 4.

38 de comentarii:

  1. Buna,stie cumva cineva cum pun bara cu share,like...etc,exemplu aici:http://awesomescreenshot.com/0c4ts445

    RăspundețiȘtergere
  2. a mers foarte bine si usor. multumesc

    RăspundețiȘtergere
  3. Buna, nu am experienta de loc
    am urmat pasii de mai sus dar se instaleaza inaintea optiunii "aflati mai multe"
    blogul este http://covorul-meu.blogspot.com/
    radu.tuglea@gmail.com
    Sper sa ma poti ajuta

    RăspundețiȘtergere
  4. As dori si eu un script asemanator cu ce a cerut anonim mai sus.Multumesc

    RăspundețiȘtergere
  5. buna! Am urmat si eu toti pasii de pasii mai sus si mi-a mers butonul la vreo 4 articole, dar acum este inactiv, adica apare, dar nu pot sa dau like efectiv. blogul meu este http://fashionablejoy.blogspot.com/
    poti sa ma ajuti, te rog?

    RăspundețiȘtergere
    Răspunsuri
    1. like-ul nu trebuie sa dai numai tu, intreaba si prietenii daca lor le apare..

      Ștergere
  6. nu găsesc acest cod cu CTRL+F, inseamna ca el nu-i? ce să fac?
    e-mail: noiscriem@hotmail.com

    RăspundețiȘtergere
  7. Daca te referi la acest cod: <data:post.body/> atunci mai mult ca sigur nu ai bifat casuta pentru extinderea codului sablonului.

    Bifeaza casuta si cauta din nou.

    RăspundețiȘtergere
  8. Am si eu o problema , dupa introducerea codului cand incerc sa dau like , apare " error " :(
    As ramane recunoscator daca m-ai putea ajuta sa rezolv problema.
    Multumesc!

    RăspundețiȘtergere
  9. Bună, mulțumesc mult pentru acest minunat tutorial! E foarte explicit!

    RăspundețiȘtergere
  10. Un cod Perfect s-a incorporat perfect.Multumesc

    RăspundețiȘtergere
  11. Groaznic, interfereaza cu ce am scris in articol, trebuie sa las 3 spatii libere ca sa nu inghesuie ce am scris eu in postari...

    RăspundețiȘtergere
  12. Buna seara!!

    Am introdus codul pentru butonul like si nu se intampla nimic, ma puteti ajuta?

    www.wishcometruehera.blogspot.com

    RăspundețiȘtergere
  13. Salut! excelente informatiile, insa am si eu o intrebare de novice. Dupa ce am "montat" bara cu facebook au inceput sa curga "Like-urile". Insa fiind curios din fire as vrea sa stiu de la cine sunt... pot sa aflu treaba asta? multumesc!

    RăspundețiȘtergere
  14. As dori si eu un asemenea buton dar cu "semnaleaza problema"... am un blog de filme online si se mai intampla sa se stearga filmele din contul meu de vk si as vrea ca utilizatorii sa dea click pe acel button sa-mi semnaleze ca acel film nu mai functioneaza daca ma poti ajuta te rog mult email ice.2408@yahoo.com ms

    RăspundețiȘtergere
  15. eu care nu ma pricep deloc la chestii deastea, m-am descurcat de minune urmand instructiunile....felicitari pentru exprimarea usoara

    RăspundețiȘtergere
  16. -Salut , frumoase tutoriale faci , dar din pacate uni dintre noi , incepatori fiind , nu reusim , de aceea cerem ajutorul , cu lamuriri mai profunde , iata eu detin un blog de succes , este pe platforma WP. gratuita , si incerc sa introduc cumva cumva share like , dar nu reusesc sub nici o forma , tot ce pot obtine ... vezi-> http://discutii100ro.wordpress.com/ unde doresc ca o parte sau cine doreste sa dea share de pe aceasta pagina , nu este neaparat nevoie la toate posturile , sau paginile , o data ce-l am pe laterala , eu zic este ok , dar acum te rog , si-ti multumesc frumos daca ma poti ajuta .Cristian

    RăspundețiȘtergere
    Răspunsuri
    1. Salut si multumesc!
      Pe Wordpress trebuie sa intri la Aspect - Widget-uri si sa cautati widget-ul: Facebook Like Box. Configureaza-l si adauga-l in sidebar.

      Succes!

      Ștergere
    2. Buna, am incercat si eu cum ai explicat aici cu widget-ul, insa merge doar daca ai facuta o pagina de facebook a blogului si apare doar casuta cu like-uri pentru pagina :(

      Ștergere
  17. -Salut , in primul rind multumesc pentru raspuns .
    -Am facut aceasta imi amintesc , cu ceva timp in urma , si am sters acest widget , din simplu motiv , ca nu-mi apareau prieteni acolo , dar cred ca defapt , cine se logheaza prin acest widget de pe pagina blogului , va aparea acolo , sau...?
    -Cum de unii au fetele celor de pe FB , la mine dece nu apare.
    -Scuzele de rigoare daca vin cu siciieli de genu.
    -Multumesc frumos.
    -Cristian-

    RăspundețiȘtergere
    Răspunsuri
    1. Salut
      codul este modificat sa nu apara fetele.
      Daca te uiti atent in cod vei vedea asta "show_faces=false"

      "false" face ca fetele sa nu apara. Daca vrei sa apara schimba "false" cu "true"

      Ștergere
  18. nici mie nu imi apare butonul de like....
    http://infostartdivertismentsiopinie.blogspot.ro

    RăspundețiȘtergere
  19. Salut. Am si eu o problema daca ma poti ajuta.. Copiez codul acolo unde trebuie insa atunci cand dau previzualizare nu imi apare absolut nimic. De ce si ce ar trebuii sa fac?

    RăspundețiȘtergere
  20. Am incercat chiar si sa il scriu de mana si tot nu merge.. Multumesc anticipat!

    RăspundețiȘtergere
    Răspunsuri
    1. Codul este bagat intre taguri conditionale. Asta inseamna ca apare doar in pagina postarii si in paginile statice.
      La previzualizare apare pagina principala a blogului si astfel este normal sa nu apara butonul.
      Adauga codul si salveaza sablonul. Apoi intra pe o postare si vezi daca a aparut.

      Daca vrei sa apara si in pagina principala a blogului trebuie sa stergi tagurile conditionale. Detalii in ultima pagina a acestui articol.

      Ștergere
    2. Unde gasesc casuta de extindere a codului sablonului?

      Apas Design, Editati HTML, imediat dupa linia lipesc codul indiferent ca e primul sau al 2lea si nu imi apare nimic nicicum.
      Mentionez ca am interfata noua (daca asta conteaza cu ceva)

      Ștergere
  21. multumesc pentru cod...si pentru alte coduri pentru care n-am apucat sa-ti multumesc

    RăspundețiȘtergere
  22. Buna,dupa multe cautari am gasit aici ,explicit si cat se poate de detaliat cum sa atasez acest cod.Desi am urmat toti pasii ,nu imi apare butonul de "Like".Ce anume ar putea cauza asta?
    Mersi anticipat.

    RăspundețiȘtergere
  23. Buna , in interfata noua pentru blogger cum se face casuta de like si comentariile facebook? Multumesc anticipat!

    RăspundețiȘtergere
  24. Cu interfata noua am si eu probleme:( nu reusesc sa gasesc nimic

    RăspundețiȘtergere
  25. Mai este valabilă această opțiune? dacă da... la mine nu merge :(
    http://bibliotecapetrila.blogspot.ro/

    RăspundețiȘtergere
  26. Am adaugat codul pe blogul meu insa nu imi apare niciun buton de like in postari. Se poate face un update la acest tutorial cu un cod care merge?

    RăspundețiȘtergere
  27. Nici mie nu-mi merge :(

    https://whitewolfromania.wordpress.com/

    RăspundețiȘtergere