How to Add POP UP Facebook Like Box for Blogger Blog?

I would recommended that every blogger blog have their own Facebook fan pages so that all readers, visitors, fans of your blog would update of your posts.

Their are many ways to gain facebook fans. One way is to SEO your fan page, another is to put in your blog, or you can even used script to gain facebook fans. And now let me teach you on how to add POP UP facebook like box for blogger blogs.

POP UP Facebook Like Box for blogger blogs is just a like box but it will display as POP-UP message that this blog has a facebook fan page. By this one, you're telling your visitors, readers that you can get more updates by liking the fan page.

Procedure on How to Add POP UP Facebook Like Box Button for Blogger Blogs.

• Log in to your Blogger Account >> Template >> Edit HTML 
• Search </head>
• Paste the code below </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=flase') == -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:"#mdfb"});
}
});
</script>

For the code, download here or here

• Save Template
• Go to Layout >> Add Gadget >> HTML/Javascript
• Add this code

<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<h3 class="mdbox-title">Receive all updates from us via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >&#9660;</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fjomarisme&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><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://jomarlipon.blogspot.com">Blogger Tricks</a></p>
</div>
</div>

For the code, download here or here

• Change jomarisme to the url of your page
• e.g www.facebook.com/samplepage >> jomarisme should be replace to samplepage
• Then, Save and you're done

Share on Google Plus

About Jomar Lipon

Web Developer at your service and frustrated blogger in Cebu. Author of JomarPH.com, SEO Specialist.