Widget Facebook "Apreciaza si distribuie acest post"

In ultimul timp Facebook a devenit foarte popular printre bloggeri, care il folosesc pentru promovarea articolelor de pe blogurile proprii. Optiunile folosite sunt: optiunea de a distribui articole si optiunea "Imi place".

Folosindu-ma de widgetul creat de Facebook Like Box For Blogger, am modificat butonul care in widget-ul original doar trimetea catre pagina cu fani a bloggerului si am introdus un buton care distribuie articolul respectiv.
De asemenea am modificat textul (care de fapt e o poza) sa fie in romana.

Widgetul odata instalat v-a apare sub articol si doar in pagina articolului, el nefiind vizibil in pagina de start a blogului. El poate fi modificat foarte usor sa apara si in pagina de start, dar va voi arata la sfarsit cum sa faceti.




Daca doriti sa instalati acest widget, iata ce trebuie sa faceti:

1. Intrati la Design --> Editati html si faceti o copie a sablonului actual apasand link-ul "Descărcaţi şablonul complet". Faceti acest lucru pentru a avea o copie de siguranta in caz ca ceva nu merge bine atunci cand editati codul sablonului.



2. Bifati casuta care extinde codul sablonului. (important)

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

]]></b:skin>

Odata gasit, copiati inaintea lui acest grup de coduri (cod CSS)

/* Widget Facebook  */
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:500px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM3KByg1ZhkdZgOwvOWsQ5vaIuP2vOStE7V6BE6Xtidg2rvB5gBaGISv2gY7VwASO3s-rqKVqJK7mI_w002e5cioERbN350yCyd06lcTfFyEomup6Gooy6_LnxNnT3lbyHDafNdqidllY/s1600/text.png") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5xAFBI9b7b2Iw1_luWmQ0QvOasENAQhiAIE2znAog4S4m5lkL0Jj29U36nZJgO0VsBetBAp0egON30JxyfAxmCJ45nY7GpP8kBOYjw6BeehVdVEWf512X_p2fQ_2ZuSJcGE9oaQWJLU/s1600/distribuie_buton.png") no-repeat scroll left top transparent;
display:block;
margin-left:385px;
text-indent:-5000px;
}


.fb_like_top a:hover {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoekvY5f7pLizjXkHMaabyLrEj8mtPX5ww3fI6aGSINXHvoj3HvZpFaKsN296doHBlzefu8lC0xnaceeq8wSrf7_jJyJH97ZjvKG8UfpLDkI05JpEV2RWma9LxlkK8x0yX_JaZmcMyc6c/s1600/distribuie_buton_hover.png") no-repeat scroll left top transparent;
}


.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:475px;
height:42px;
}
/* sfarsit Widget Facebook  */

4. Cu ajutorul combinatiei de taste Ctrl+F gasti acest cod:

<data:post.body/>

Dupa ce l-ati gasit adaugati imediat dupa el acest grup de coduri:

<!-- Cod facebook -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='fb_like_box'>
<div class='fb_like_top'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Distribuiţi pe Facebook'/></div>
<div class='fb_like_button_holder'>
<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=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>

</b:if>

<!-- sfarsit Cod facebook -->

5. Previzualizati pentru a vedea daca ati gresit ceva si daca totul este in regula salvati si intrati pe pagina unei postari pentru a vedea cum arata widget-ul.
Daca ati gresit ceva veti fi avertizati ca este o eroare - daca va da eroare atunci apasati butonul "Stergeti editarile" si incercati din nou.




Ce puteti modifica:

-  marimea widget-ului
widget-ul este setat la o latime de 500 de pixeli. Voi trebuie sa o aduceti la latimea corpului postarii blogului vostru. Modificati valoarea scrisa cu rosu (500px) cu valoarea pe care o doriti.
Dupa ce ati modificat aceasta valoare trebuie sa modificati si valorile scrise cu albastru. Cu cat modifati mai sus, asa modificati si la aceste valori. Adaugi 50 mai sus, adaugi 50 si la cele cu albastru. Scazi 50 mai sus, scazi 50 si la cele cu albastru

-  culoarea widget-ului
modificati codul scris cu verde cu ce cod pentru culoare doriti.
Aici aveti un generator pentru culori pe care il puteti folosi.

- daca doriti ca widget-ul sa apara si in pagina de inceput atunci stergeti cele doua linii scrise cu roz