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.