luni, 18 octombrie 2010

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("http://4.bp.blogspot.com/_i6co2fwMbTo/TLoadVxMF8I/AAAAAAAAMXE/m8u8LcMRJXQ/s1600/text.png") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("http://2.bp.blogspot.com/_i6co2fwMbTo/TLoaWPoFc9I/AAAAAAAAMXA/t3dzo1MhLcU/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("http://1.bp.blogspot.com/_i6co2fwMbTo/TLodePAc4oI/AAAAAAAAMXI/9VLNBxmUzLI/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

35 de comentarii:

  1. Super! Un widget intradevar foarte folositor ;)

    RăspundețiȘtergere
  2. salut. am si eu o problema,daca ma poti ajuta:am ajuns la etapa cu feed de site..am gasit la tine pe blog un articol in care am urmat toti pasii, am facut cont, am generat acea Adresă URL pentru redirecţionarea feedului de postări.cand dau aici la mine la cont, vad ca-mi zice asa:"Beneficiaţi de AdSense pentru feeduri pentru a spori potenţialul blogului dvs. Faceţi clic aici pentru a începe".dau click si iata ce-mi zice din nou: "Redirecţionaţi către un feed FeedBurner sau alt feed care aparţine unui cont Google, care nu este identic cu cel al proprietarului acestui blog. Pentru ca AdSense pentru feeduri să vă afişeze anunţuri în feed, trebuie să vă redirecţionaţi feedul prin FeedBurner. Dezactivaţi redirecţionarea din Setări | Feedul site-ului | Adresa URL de redirecţionare a feedului de postări, apoi reluaţi acest pas." ma duc la setari si la "Adresă URL pentru redirecţionarea feedului de postări" am urmatorul: http://bancuri-unusiunu.blogspot.com/feeds/posts/default?alt=rss.sincer as vrea sas ma lamuresti un pic ca nu mai stiu...m-am cam incurcat..este bine?cum ot profita de acele reclame adsense ptr feeduri.si pana la urma ce este cu acest feed? daca-mi poti raspunde la catalin.sirbi@gmail.com. merci mult si sa stii ca blogul tau este de foarte mare ajutor.

    RăspundețiȘtergere
  3. mie nu-mi functioneaza. se poate sa fie din cauza ca am deja un widget facebook?

    http://unzambetpezi.blogspot.com/

    RăspundețiȘtergere
  4. Daca ai lasa codurile in sablon as putea sa-mi fac o parere!

    RăspundețiȘtergere
  5. salut daniel..imi raspunzi si mie te rog la ceea ce ti-am scris...astept un raspuns

    RăspundețiȘtergere
  6. As vrea sa faci un articol in care sa arati cum se instaleaza "Featured Content Slide", adica sa fie postarile in slide. Vreau sa imi pun si eu pe blog.

    RăspundețiȘtergere
  7. Poate ma puteti ajuta si pe mine cu chestia asta. am copiat intocmai codurile, dar widgetul nu vrea sa apara. Cred ca necesita indemanarea unui profesionist. Same password...

    RăspundețiȘtergere
  8. Moroi, s-a rezolvat. Nu sunt sigur de culoare :). Vezi si tu si anunta-ma daca vrei alta.

    RăspundețiȘtergere
  9. Vă mukţumesc mult. Culorile sunt ok. Sunt specifice feisbucului. O singură problemă. E al naibii de lată treaba aia. Ca lăţime mă refer. Nu se poate îngusta? DAcă nu e bine şi aşa. Vă mulţumesc

    RăspundețiȘtergere
  10. aceeasi problema ca Moroi o am si eu.. am copiat codurile intocmai insa nu vrea sa apara.. ce-i de facut? multumesc!

    RăspundețiȘtergere
  11. Pentru a inlatura chenarul, cautati liniile din codul pt facebook si stergetile
    background-color:#3B5999;
    border:3px solid #2B2B2B;

    RăspundețiȘtergere
  12. Nu reusesc sa fac sa apara widget-ul Facebook.....Da-mi un sfat!www.haine-lamoda.blogspot.com

    RăspundețiȘtergere
  13. Intr-adevar este un widget foarte bun. Am fost multumit de el insa nu prea stiu la ce ajuta

    RăspundețiȘtergere
  14. cam multa treaba :)), ingreuneaza paginile, si deja am un mod de distribuire :|

    RăspundețiȘtergere
  15. Am reusit sa-l pun pe blog, dar daca postarea este mai lunga imi apare casuta aceea cu chenar si 'distribuie" pe undeva pe sub text sau poze, iar textul din chenar la sfarsitul postari. Ce pot face?

    RăspundețiȘtergere
  16. Am mai introdus un widget (postari asemanatoare) si si-a revenit acesta in detrimentul noului introdus. Care este explicatia?

    RăspundețiȘtergere
  17. mie imi apare doar buton de like si distribuie, nu inteleg de ce :-?

    RăspundețiȘtergere
  18. cum ai reusit sa faci upload la imaginea cu distribuie?

    RăspundețiȘtergere
  19. Bună! Am folosit şi eu un cod pentru butonul de like. L-am luat de pe blogul altcuiva. Înainte să modific în html am salvat o copie a şablonului.
    Codul a mers, singura problemă e că mi s-a mutat coloana din dreapta unde aveam categoriile, arhiva, followers etc, în josul paginii sub postări.
    Am folosit copia şablonului sperând că se ca modifică la loc, dar nu a mers. Nu ştiu cum să mut la loc coloana că nu-mi place deloc cum arată aşa.
    Poţi să îmi dai şi mie un sfat, te rog?

    Blogul meu este:
    http://ialmosthadyou.blogspot.com/

    Mulţumesc frumos!

    RăspundețiȘtergere
  20. Multumesc! Foarte util blogul tau!

    RăspundețiȘtergere
  21. Dar cum pun numai butonul acela cu Like ? Eu doar atat vreau nu si Distribuie ! Daca imi poti zc iti multumesc >:D< dar te rog zi-mi la e-mail : strongzone1@yahoo.com cand imi spui undeva pe blog :D

    RăspundețiȘtergere
  22. Cum fac sau ce modific în cod ca să-mi dispară căsuţa cu "Distribuie". Eu am scos chenarul :D . Mulţumesc.

    RăspundețiȘtergere
  23. hey...mie nu imi apare
    ma poti ajuta, te rog?

    RăspundețiȘtergere
  24. nu imi gaseste ]]>in> cand dau acolo. :|

    RăspundețiȘtergere
  25. A esit din prima ,saru-mana,va multumesc din suflet..

    RăspundețiȘtergere
  26. Am incercat atatea metode dar nu reusesc nicicum,,,probabil am facut mult prea multe modificari sablonului..

    RăspundețiȘtergere