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.

How to Add POP UP Facebook Like Box for Blogger Blog

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

<script src=''></script>
<script src="[]jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="" type="text/css" />
<script type="text/javascript">
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"});

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>
<iframe src="//;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="">Blogger Tricks</a></p>

For the code, download here or here
  • Change jomarisme to the url of your page
    • e.g >> 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, SEO Specialist.
    Blogger Comment
    Facebook Comment


  1. This cool works cool with my blog. Thanks for the posting

  2. great share. Thanks for the posting

  3. Nice tutorial... if only the code can be copied. Why do bloggers keep posting tutorials like this and yet make it difficult for their readers to do it themselves?

  4. Really Nice Amazing Thanks For Sharing This popup :) like box

  5. Fîrâs ÀrfàouîOctober 10, 2014 at 2:10 AM

    Not Found
    The requested URL /svn/trunk/html/[]jquery.colorbox-min.js was not found on this server.


Pin It

Receive all updates from us via Facebook. Just Click the Like Button Below