Plugin Facebook Like per Blogspot




Come avrete notato all'apertura di questo blog ho rimosso il vecchio popup di Facebook. Infatti, esso si ripresentava ad ogni caricamento della pagina e visto che la cosa è abbastanza noiosa ho deciso di sostituirlo con questo nuovo che invece si ripresenta una sola volta al giorno.

Inoltre, inserire questo plugin è decisamente più facile. Infatti, ora dovrete semplicemente inserire questo codice in un gadget HTML/Javascript.

IL codice è questo:


<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwUcOT4tmorA6rtNFKq0LVgkRe0L-wz8swJWR2RGz3X9kNtOYstm4jIA6P8FhPL0ldrk5U1_7FW5afBZWRegB0nwM_LBUrQyv8BEJZMMO-zHxnuwkC-13RMm6QdMs3OSKs38C6_oSidE/s1600/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrg2HYbvLdgRWLTfDswW0wpnNxX1FJzTZJegpEwWjgt54gYrAJm6w2npErD885hzibL3eEW1U9xbfKy251FFIp0QoyuRqdC00nKDrBVaRNkk2zU99AaBLUPw30MltHkBRnMaGrtJMNhso/s400/border.png) repeat-x top left;}

    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwUcOT4tmorA6rtNFKq0LVgkRe0L-wz8swJWR2RGz3X9kNtOYstm4jIA6P8FhPL0ldrk5U1_7FW5afBZWRegB0nwM_LBUrQyv8BEJZMMO-zHxnuwkC-13RMm6QdMs3OSKs38C6_oSidE/s1600/controls.png) no-repeat -36px 0;}

    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwUcOT4tmorA6rtNFKq0LVgkRe0L-wz8swJWR2RGz3X9kNtOYstm4jIA6P8FhPL0ldrk5U1_7FW5afBZWRegB0nwM_LBUrQyv8BEJZMMO-zHxnuwkC-13RMm6QdMs3OSKs38C6_oSidE/s1600/controls.png) no-repeat 0 -32px;}

    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrg2HYbvLdgRWLTfDswW0wpnNxX1FJzTZJegpEwWjgt54gYrAJm6w2npErD885hzibL3eEW1U9xbfKy251FFIp0QoyuRqdC00nKDrBVaRNkk2zU99AaBLUPw30MltHkBRnMaGrtJMNhso/s400/border.png) repeat-x bottom left;}

    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwUcOT4tmorA6rtNFKq0LVgkRe0L-wz8swJWR2RGz3X9kNtOYstm4jIA6P8FhPL0ldrk5U1_7FW5afBZWRegB0nwM_LBUrQyv8BEJZMMO-zHxnuwkC-13RMm6QdMs3OSKs38C6_oSidE/s1600/controls.png) no-repeat -36px -32px;}

    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwUcOT4tmorA6rtNFKq0LVgkRe0L-wz8swJWR2RGz3X9kNtOYstm4jIA6P8FhPL0ldrk5U1_7FW5afBZWRegB0nwM_LBUrQyv8BEJZMMO-zHxnuwkC-13RMm6QdMs3OSKs38C6_oSidE/s1600/controls.png) repeat-y -175px 0;}

    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwUcOT4tmorA6rtNFKq0LVgkRe0L-wz8swJWR2RGz3X9kNtOYstm4jIA6P8FhPL0ldrk5U1_7FW5afBZWRegB0nwM_LBUrQyv8BEJZMMO-zHxnuwkC-13RMm6QdMs3OSKs38C6_oSidE/s1600/controls.png) repeat-y -211px 0;}

    #cboxContent{background:#fff; overflow:visible;}

        #cboxLoadedContent{margin-bottom:5px;}

        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKFSC8JqCH_TJtTF3F_sg-ir2bEcxGqiPl17TqlRtfgnuGFJxWDT2pWO9ZEL1H_Ns6ATW9TeZkhVefF2gjOaBFpTs5_bZlyxY6YMO4qBy0Akk7Xz3D7gAT2lkmsMHnfecbgPbohoOGWs/s400/loadingbackground.png) no-repeat center center;}

        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrsgKWXM00bDq1acvsVa9v6Hgp7L64VONz5AYenPSmrvYBzKt76jigYIKG1SHXFJjmUFw89wTsHz2lQUQyneNbfHpCWlG9sANR_RJMzI1wex3AxpE-kQuz-XVfOy_NOEqyRmoTZzeAEY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwUcOT4tmorA6rtNFKq0LVgkRe0L-wz8swJWR2RGz3X9kNtOYstm4jIA6P8FhPL0ldrk5U1_7FW5afBZWRegB0nwM_LBUrQyv8BEJZMMO-zHxnuwkC-13RMm6QdMs3OSKs38C6_oSidE/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*1;

       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">Seguimi su Facebook.



Per chiudere questo popup clicca semplicemente sulla X in basso a destra
<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%2FILBlogdiAlessioFasano&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</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>

La parte in rosso è quella da modificare. Il numero 1 indica che il popup apparirà una volta al giorno. Se volete che esso appaia una volta a settimana sostituite 1 con 7 e così via.

Al posto di ILBlogdiAlessioFasano inserite il nome utente della vostra pagina (quello che segue facebook.com/ ). A questo punto il popup è pronto :)

3 Commenti

  1. Ho provato inserendo tutto il codice in un gadget ma non va..come mai?

    RispondiElimina
    Risposte
    1. forse hai sbagliato qualche passaggio. Tieni presente che lo vedrai apparire solo una volta ogni 24 ore ;)

      Elimina
  2. funziona benissimo da me grazie mille :)
    http://www.tecnology-now.com/

    RispondiElimina
Nuova Vecchia