How to Add Facebook Like Box and Feedburner Subscription to a Blogger Blog

Posted by GKE In , | 1 comments»

One of the ways of getting traffic to your blog is through social media such as Facebook. You will however only get a substantial amount of traffic only when you have many followers. To get people to like your Facebook fan page is not that easy unless you do something to catch your viewers attention or offer something in return for a Like.



This post is about a jQuery plugin popup with both Facebook and Feedburner subscription box. This plugin will pop up when a visitor arrives at your blog with your Facebook widget and Feedburner subscriptions in place. This is a way to encourage visitors to like your fan page and or subscribe to your feed. This plugin will significantly increase the number of Facebook fans you have which will in turn increase your traffic over time.

The Popup Features
It appears once in 30 days to every visitor. This is possible because it stores the visitors' ip in their browser.
It appears on every of your blog pages

How to Add The jQuery Popup to Blogger
Log in to your blogger account and go to Design
From the right column click Add a Gadget and select HTML/Javascript widget
Copy the code below and paste it in the gadget

<style>
    /* Jquery Facebook Likebox Popup Version 2.0 by TechBase: TechBase.info
    */
    #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/AVvXsEiA5GkFASyjzyN25WXvCtN2UlF7w6GOABFOL7-MTw2V5aTk65WjYDsF6eKDoTnXNV8UwUDQicPaKx7iag617JwqAP48BGY4B0fwWJWnWRbGbYvoBhZzkgkmDRL8udnrQkN1e6RfCcc7S4s/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjT__oOBzOTnoTSaRd7bFmE9PLNGIoF4-pvDbAtkz04UmQsY0c5tLhyphenhyphen7-EOV_XuN3M7ejpHdoTb0Jo0WMTxkylCGJPwViJjnsLXECkZLIfCX60E1hhyphenhyphen69SuhJ1A2iA3YJfgRe6R6KpPOg/s400/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5GkFASyjzyN25WXvCtN2UlF7w6GOABFOL7-MTw2V5aTk65WjYDsF6eKDoTnXNV8UwUDQicPaKx7iag617JwqAP48BGY4B0fwWJWnWRbGbYvoBhZzkgkmDRL8udnrQkN1e6RfCcc7S4s/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5GkFASyjzyN25WXvCtN2UlF7w6GOABFOL7-MTw2V5aTk65WjYDsF6eKDoTnXNV8UwUDQicPaKx7iag617JwqAP48BGY4B0fwWJWnWRbGbYvoBhZzkgkmDRL8udnrQkN1e6RfCcc7S4s/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjT__oOBzOTnoTSaRd7bFmE9PLNGIoF4-pvDbAtkz04UmQsY0c5tLhyphenhyphen7-EOV_XuN3M7ejpHdoTb0Jo0WMTxkylCGJPwViJjnsLXECkZLIfCX60E1hhyphenhyphen69SuhJ1A2iA3YJfgRe6R6KpPOg/s400/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5GkFASyjzyN25WXvCtN2UlF7w6GOABFOL7-MTw2V5aTk65WjYDsF6eKDoTnXNV8UwUDQicPaKx7iag617JwqAP48BGY4B0fwWJWnWRbGbYvoBhZzkgkmDRL8udnrQkN1e6RfCcc7S4s/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5GkFASyjzyN25WXvCtN2UlF7w6GOABFOL7-MTw2V5aTk65WjYDsF6eKDoTnXNV8UwUDQicPaKx7iag617JwqAP48BGY4B0fwWJWnWRbGbYvoBhZzkgkmDRL8udnrQkN1e6RfCcc7S4s/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5GkFASyjzyN25WXvCtN2UlF7w6GOABFOL7-MTw2V5aTk65WjYDsF6eKDoTnXNV8UwUDQicPaKx7iag617JwqAP48BGY4B0fwWJWnWRbGbYvoBhZzkgkmDRL8udnrQkN1e6RfCcc7S4s/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/AVvXsEgBC9wjL4vMQCA4e01OakXhb52KLuMKncTuQFq3411dgZcHkRy934hF5eBChxwnRL7RSqtQ_MclxJ_v9MzXRySbY6hjOlsTaKWOINqcCH31DHSO3CM_KdoE7oTpt6Kp_UUhD7sgrBoqzwI/s400/loadingbackground.png) no-repeat center center;}
        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1Tx_wh8Qr9hutGVn-XKxX3FnZetEjmlPYKfr0L6LA5C5mf95FcoM6okZb0Los2PZTsELP-mgEfUKPIyI5WLgmjxdVAhPfTnaDrd6ML3vctGgZwvfJ3QQLCvbk-SJhLaQl_Ra4pg-6EQ/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/AVvXsEiA5GkFASyjzyN25WXvCtN2UlF7w6GOABFOL7-MTw2V5aTk65WjYDsF6eKDoTnXNV8UwUDQicPaKx7iag617JwqAP48BGY4B0fwWJWnWRbGbYvoBhZzkgkmDRL8udnrQkN1e6RfCcc7S4s/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;
    }

/* ---------TechBase 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://jquerycolorbox-min.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">Like us on Facebook to receive regular updates<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%2Ftechbaze&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='Tech-Base', '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="Tech-Base" 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.techbase.info">TechBase</a></p>
    </div>
    </div>


Finally you should now change the highlighted values
*30: Refresh value in days - popup will appear on visitor's screen again after 30 days
*techbzae: replace with your facebook username
*Tech-Base: Replace that with your feed title

Now save the widget and see what you've done
You can open up another browser to test. Clear your browser cookies to see it pop up again.


Subscribe via RSS or Subscribe by Email.
Like TechBase on Facebook

1 comments:

Anonymous Says:
January 13, 2013 at 7:19 PM

Having read this I believed it was really informative.
I appreciate you finding the time and energy to put
this short article together. I once again find myself personally spending way too much time both reading and posting comments.
But so what, it was still worthwhile!
Also visit my blog post : work online

Post a Comment

Post your comment or feedback

Subscribe to: Post Comments (Atom)