Share

Widgets

luni, 26 decembrie 2011

Likebox Facebook pentru Blogger/Blogspot

Se apropie Anul Nou, fiecare dintre noi cauta solutii neobisnuite pentru a rezolva probleme simple. De exemplu, in loc de Likebox traditional de la Facebook in sidebar sau footer, instalam un widget plutitor pe blogul nostru.


Vreau sa ofer o optiune, cand butonul mare de la Facebook, in timp ce se afla in dreapta, va insoti pe cititor tot timpul, pana cand el face cunostinta cu continutul de articole.

Si daca punem cursorul pe buton, inaintea vizitatorilor va aparea Likebox, cu propunerea da alaturare la pagina pentru fani a blogului tau. Iata cum va arata:


Exemplul poate fi vazut pe blogul meu de test.

Bineinteles, inainte de a instala widget-ul interesant si neobisnuit, trebuie sa creezi pagina pentru fani pe Facebook pentru blog. Pentru a afla cum se face acest lucru, poti afla pe blogul lui Adi.

Eu lucrez pe mai multe platforme, site-urile le fac in Joomla, alte bloguri am in WordPress, dar nu ma consider expert in platforma de WordPress. Daca esti interesat pentru platforma WordPress, poti sa vezi pasii cu instructiuni pe blogul MyBloggerTricks (in limba engleza).

Bloggerii care prefera platforma Blogger, pot profita de traducerea mea (originalul aici).

Likebox Facebook pentru Blogger

1. Intram in Tablou de bord – Design – Elemente de pagina – Adauga un obiect gadget.

2. Din lista selectam “HTML/JavaScript” si in fereastra oferita inseram acest cod:
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/FreeSeoDesign/170361616345420&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>

3. Inlocuim fragmentul evidentiat cu rosu.

Cu adresa paginii tale pentru fani Facebook si salvam.

4. Intram in Tablou de bord – Design – Editati HTML si mai jos de  <head>inseram codul JQuery:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
5. Salvam sablonul si admiram rezultatul muncii depuse.

Sunt sigur ca datorita widget-ului neobisnuit Likebox, numarul de fani pentru pagina de Facebook va creste in mod semnificativ!