Facebook Like Box Pop Up în Blogger

Facebook Like Box Pop Up este o fereastră cu Facebook Like Box, care apare atunci când un nou vizitator ajunge pe siteul tău. Astfel ne ajută să creştem numărul de fani Facebook şi abonaţi RSS, deoarece versiunea aceasta conţine şi Email Subscription Box. Acest Pop Up apare doar o singură dată pentru fiecare vizitator nou. Adresa IP a vizitatorului este stocată în cookie-urile browser-ului, iar când pagina este reîncărcată widget-ul nu va mai apărea din nou pentru acelaşi vizitator, eliminând astfel şansele de iritare a cititorilor regulaţi.

Ar fi fost ciudat dacă PopUp-ul apărea iarăsi şi iarăsi, la fiecare vizualizare a paginii. Acesta apare pe orice pagină accesată de noul vizitator, pagina de pornire, pagina articolului sau alte pagini. Reîmprospătarea cookie este setată la 30 de zile, ceea ce înseamnă că acest lightbox îşi va face apariţia din nou pentru acelaşi vizitator, după 30 de zile. În cazul în care o persoană îşi şterge datele de navigare a browser-ului, în momentul când intră pe blogul tău, lightbox-ul va apărea iarăşi. Acest plugin poate fi aplicat atât pe Wordpress cât şi pe Blogger. În cele ce urmează voi prezenta cum îl adăugăm în Blogger.
  • Mergem la Aspect -> Adăugaţi un obiect gadget -> HTML/JavaScript
  • Lipim următorul cod:
<style>
    /* Jquery Facebook Likebox Popup Version 2.0 by MBT    MyBloggerTricks.com
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    /*

       User Style:
       Change the following styles to modify the appearance of ColorBox.  They are
       ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
   
   #cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
        #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger Version 2.0
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 18px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }

    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }

/* ---------MBT Subscribe Form---------- */
    .box-title1 {
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
        padding:10px;
  margin: 10px 0;
    }

    .enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
    .submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}
    </style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>


        <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
          <center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpdolhescu&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<div class="box-title1 ">
<center>
<h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PetruDolhescu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="PetruDolhescu" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>
<!--Please Do not Remove the Credits -->
    <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
    </div>
    </div>

Acum nu-ţi mai rămâne decât personalizarea:
  • Textele în orange pot fi înlocuite cu ce text doreşti.
  • Poţi modifica 30 cu ce valoare doreşti. Aceasta este reîmprospătarea cookie de care vorbeam mai sus. De exemplu dacă doreşti ca acest lightbox să-şi facă apariţia din nou pentru acelaşi vizitator, după o săptămână, înlocuieşti cu 7.
  • Înlocuieşti pdolhescu cu numele de utilizator al paginii facebook a site-ului tău.
  • În final înlocuieşti PetruDolhescu cu titlul feed-ului tău. Acesta se află la sfârşitul link-ului feed-ului. Link-ul feed-ului meu este http://feeds.feedburner.com/PetruDolhescu
  • Nu uita să salvezi obiectul gadget.
Vizualizează blogul şi vezi Facebook Like Box Pop Up. Este posibil să fie nevoie o ştergere a datelor de navigare a browser-ului.


Dacă ai nelămuriri lasă un comentariu. Blogul să ne crească!

13 comentarii

  1. Foarte interesant. După ce o să adun câţiva unici o să îl pun şi eu pe blog. Mulţumesc :)

    RăspundețiȘtergere
  2. Ar trebui sa fi scris si varianta pentru Wordpress, sau un link catre un tutorial pentru Wordpress ;)

    RăspundețiȘtergere
    Răspunsuri
    1. Ar fi fost bine, dar eu sunt "specializat" in Blogger. Cred ca adaugarea pe wordpress se face prin metoda similara. Adica lipirea codului intr-un widget Text (Text sau HTML).

      Ștergere
  3. Am o problema in blogger:linkurile catre facebook nu mai preiau imaginea din post. Pana nu demult prelua si imaginea si aveam si optiunea de a alege din cele cateva selectate. Poti sa-mi dai o solutie?

    http://florian-hotinfoblog.blogspot.com

    RăspundețiȘtergere
    Răspunsuri
    1. Salut! Florian si bine ai venit pe blogul meu. Nu trebuie sa-ti faci probleme, uneori facebook nu preia imaginile de pe site. Poti sa dai un refresh si sa mai incerci. Eu am postat link-ul blogului tau pe peretele meu si imaginile au fost preluate. Poti incerca setarea unui thumbnail predefinit

      Ștergere
    2. Multumesc mult si iti voi transmite ce am rezolvat.

      Ștergere
    3. La linkul blogului merge dar la posturi nu. Am incercat sugestiile tale dar nu merg in blogger.
      Oricum multumesc de bunavointa si daca mai gasesti ceva te rog sa-mi transmiti.

      Ștergere
    4. Stai linistit nu este nicio problema cu blogul tau. Eu am postat link-ul unui post de-al tau pe peretele paginii mele si imaginile au fost preluate. Uneori merge, alteori nu.

      Ștergere
  4. Va multumesc din suflet pentru tot! Ati explicat atat de bine incat poate intelege orice incepator. Va doresc tot binele din lume! http://asociatia-o-parte-din-rai.blogspot.ro/

    RăspundețiȘtergere
    Răspunsuri
    1. Mă bucur foarte mult să aud asta, mai ales că acum trec printr-o perioadă mai dificilă a vieții, primul an de studenție la ETTI. Materia este grea și volumul de informații pe care trebuie să-l acumulez într-un timp scurt este mare. Blogul a rămas în păragină și astfel de comentarii îmi dau un impuls pentru a continua...Mulțumesc!

      Ștergere
  5. buna, pentru site stii cumva care sunt pasii de inserare pentru Facebook Like Box Pop Up ???
    multumesc.

    RăspundețiȘtergere
    Răspunsuri
    1. Acest plugin nu se poate implimenta decât pe platforma Blogger sau pe Wordpress

      Ștergere