Add Facebook Page Plugin Popup Like Box to Blogger

Add Facebook popup like Page box for blogger
Adding a Facebook page popup like box plugin to your blogger blog will definitely increase the likes of your Facebook fan page insanely if it is nicely presented and well designed for your readers. Visitors of any blog become readers only when they are impressed with the content of your blog and its quality over quantity compared to other blogs in your niche.

If you gave your visitors more than for what they landed on your blog, they will definitely subscribe, share, follow or like your Facebook fan page but a call to action trigger is needed otherwise you will skip this chance of having more Facebook fans, more subscribers, shares or followers.

That is where these plugins like as Facebook page popup like box plugin or stylish subscription box come handy. Most of the visitors of any blog never read any article thoroughly and only scan a page so chances are more that they might miss your "Facebook fan page like badge" widget on your sidebar.

looking for an example of not using this plugin? Then you must see fan page likes, lol. But when a popup box appears in the center of the screen while they are scanning your epic content, they can't really miss it. I started using it from today and I hope it will work nicely for what it is intended. By the way, you can do me a favor, am counting on you :)

But that does not guarantee of more likes because it depends on many things like as quality of your content, design of your blog, timing of the popup box and finally the mood of your visitors. If they are already logged into Facebook then you are lucky enough. :)

Design & Features of our Facebook Page Popup Like Box Plugin

Design is first so have a look at the screenshot given below (you can customize it the way you want but you need to have fair knowledge of CSS)

Demo of Facebook popup like page page box for blogger

Cookies enabled: This "Facebook popup like box" is Cookies enabled so it will not irritate your visitors by loading every time they reload or visit any other blog post on your blog. Once they click on exit button, popup box fades away and sets a cookie in their browser for the time you have specified (as long as they do not clear their browser cookies, it will not appear till the date of its expiry for same user).

Responsive design: It always remains my first priority for any widget for blogger platform to make it responsive. This plugin is one of those and works perfectly on every device. Maximum width is 450px and when screen size goes down to it, it reduces its maximum width accordingly.
Recommended: Responsive Author Box Widget For Blogger

Center Screen: It always pops up in the center of the window screen and remains in the center despite the screen resolution.

Twitter Follow Button:  I have also added the twitter follow button in the bottom of "Facebook like box" so hopefully it will help you gain more followers too. :)
(Tip- Always follow back those who followed you and who retweeted your tweets and gain more followers in less time)

So these are main features and I hope it impressed you and if it really did, let's add this beautiful Facebook popup like box plugin to your blogger blog.

Follow These Steps To Add This Plugin to Your Blogger Blog

Step 1) If you're not logged into blogger account then do it ;) and select your blog > go to Template area > click on Edit HTML (backup your template first).

Step 2) Now search for </head> tag and just before it, paste the JavaScript Codes given below.
(Note: If your template is already using Google JavaScript libraries link then please do not add it again.)

<script src='' type='text/javascript'></script>

Step 3) Add CSS code now so search for ]]:</b:skin> and just before that code line, paste the whole CSS code given below.
/*----Coded by*/
#twist-blogger-fan-page {
  display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
#twist-blogger-fan-page .popup-box {
  padding: 5px;
  position: relative;
  margin: 0 auto;
  max-width: 280px;
  min-height: 272px;
  z-index: 0;
  top: 25%;
  border: 10px solid #EFF408;
  background: #F9FF00;
#twist-blogger-fan-page .popup-box .exit-button {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: -26px;
  margin-right: -20px;
#twist-blogger-fan-page .popup-box .exit-button:before {
  content: "X";
  padding: 5px 8px;
  background: #FFFFFF;
  color: #000000;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0px -1px #000;
  font-family: sans-serif;
  border: 4px solid #EBF000;
  border-radius: 50px;
  box-shadow: inset 0px 1px #F9FF00;
#twist-blogger-fan-page .popup-box .tweetbox {
  background: #EFF408;
  font-size: 12px !important;
  width: auto;
  padding: 12px 0px 12px 12px;
  overflow: hidden !important;
  position: relative;

Step 4) Final step is to add HTML and little JavaScript code altogether so just find out closing </body> tag and just before it, paste the HTML and JavaScript given below after making required changes.
<script src='' type='text/javascript'></script>
<script type='text/javascript'>
if($.cookie('popup_facebook_box') != 'yes'){
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 15 });
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); = id;
  js.src = "//;version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id='twist-blogger-fan-page'>
<div class='popup-box'>
<div class='exit-button'></div>
<div style='overflow: hidden !important;'><div class="fb-page" data-href="" rel="nofollow" data-width="280" data-height="250" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div></div>
<div class="tweetbox">
<a class="twitter-follow-button" href="" rel="nofollow" data-show-count="true" data-lang="en">Follow@TwistBlogger</a>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);;js.src="";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>

Customization of Facebook Page Plugin Popup Like Box

Time Delay: You can change the timing of popup box appearance by changing the value 10000 to higher or lowers. 1000 value = 1-second delay so 10000 value means popup box will appear after the 10 seconds of loading your blog. Find this code line given below and change the value.


Set Cookies Expiry Days: You can set any number of days to expire the cookie so after those days, the popup box will reappear for the same user again. This way you can make it "one time Facebook popup like box" for your blogger readers by setting the higher number of days.  Find out code line given below and change the default number of days which is 15  to any number you want.

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 15 });
In case you do not want to use the cookies then just delete the above code line, but it is highly not recommended because it will certainly irritate your visitors and make them go away.

Facebook Fan Page URL: Add your Facebook fan page URL by replacing our blog URL highlighted in yellow color.

Twitter Username: Add your Twitter username in place of TwistBlogger highlighted in yellow color.

Did you complete every step of customization? So now save your Gadget then visit your blog and be the first visitor of your blog to see your Facebook page popup like box appearing in the center of window screen beautifully :)

If you want to see it again then you need to clear the browser cookies first.

I have tested it on my other test blogs and it worked fine on everyone so it will work for you too. But in case you could not make it work for you then let me know via comments or shoot me an email. I'll help you out. Do you want some changes? More features? Customization? Just ask me in comments. Till then, stay blessed.

Update: This tutorial is updated as suggested by a friend in comments that Facebook like box will stop working after June 2015 and is being replaced by Page Box so I updated it right now and used Page Box code instead of old like box.

Thanks for letting me know and we are good to go with it now. :)

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)

Stay connected, You'll not be disappointed!

32 Replies so far - Join Conversation

  1. Anonymous19:31

    Like box is deprecated and will stop working - Page plugin is replacing it.

    1. Anonymous User @ Hmm Thanks for letting me know... I will update it soon :)

    2. And I updated :) took me half an hour only :)

  2. no pop up only work as widget something wrong

    1. Pramod :: Hello Buddy,
      It should work fine but soon I'll update this tutorial and then you'll need not to enter this code into sidebar HTML/Widget.
      Thanks for taking time to leave your feedback!

    2. Reminder:: *Tutorial has been updated*

  3. Hi Satbir. Greetings from Philippines. I like your pop up page plug-in. I already tested it and follow all the steps given but it seems there's a problem 'coz the page plug in is doesn't inside the yellow box is not appearing proportionally. Check the image snao shot by clicking this page to see what I mean to say. .

    I didn't put or change the codes.

    1. Kel Sta.Maria:: Hello Buddy.
      I checked it and it is really out of alignment. I don't know why is it happening but when I used the codes inside HTML/JavaScript Widget before then it worked fine before with same codes and still working fine. But when we are using the codes inside our template then width goes back to 180px.

      I'll work on it and let you know as soon as I get time. Thanks for letting me know..!!

    2. Just as a reminder:: I updated it again and now Facebook Page Plugin renders properly inside the popup box.

      If still you're having some problems then please let me know.

  4. Hi buddy... I tested it and the pop up renders the same with the previous issue. The width of the page plugin is fixed at 180px. Fortunately I made up my mind and made some tweak to make it work properly. I added a declaration to < div class="fb-page" ..... code.

    Code before with issue..

    div class="fb-page" data-href="" rel="nofollow" data-width="280" data-height="250" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"

    Code after I added a declaration: data-adapt-container-width="false" (Working fine)
    div class="fb-page" data-href="" rel="nofollow" data-width="280" data-height="250" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"

    The data-adapt-container-width="false" ddeclaration made the page plugin not to adapt the width of the container which rendered it with fixed 180px with before.

    Nevertheless, thank you for developing a great blogger plugin like this one. I personally love it 'coz it's also responsive. Thanks a lot buddy! Godbless!

  5. By the way. I'm Kel Sta. Maria. This is my other gmail account.

    1. Pinoy Spot (Kel Sta. Maria) ::
      Thanks a ton for the heads up buddy. I'll add this declaration in my code above. All the credit goes to you. We learn from each other and this is what I love <3

      Thank you again so much..!!

  6. Nice Post. Thanks for sharing....

  7. Thanks for post but it is not working in my blog. Now what should i done.

    1. It should work buddy, Just double check if you followed all the steps carefully or not. Also clear your browser cookies or visit your blog in incognito mode to check if it is working or not.

  8. its working. Thanks for sharing.

  9. its a fantastic article. thanks for sharing it.

  10. Mr Satbir... Thanks for the code. but how do i change the background color to match with my template (Green).. Check my blog at

    1. Akuneme ::Hi,
      I am listing the codes of yellow color so change them accordingly
      Background color - #F9FF00 (Yellow)
      Border color - #EFF408 (Dark Yellow Border)

  11. satbir, you are a great man, i will always remember you for this...

    1. Samuel :: I am don't know about me but You really are Great my friend :-)

  12. Hello Satbir,

    Thanks man. I was searching for this very long. Finally found it on your blog. Your blog is awesome man. + you look master in html and css ;)

    Thanks once again.

  13. I am really thankful to you for your informative article, Thanks for sharing your valuable experience. It's really helpful for me. Hope you will continue and we see will many more informative article. Wish you all the best.

  14. I am really thankful to you for your informative article, Thanks for sharing your valuable experience. It's really helpful for me. Hope you will continue and we see will many more informative article. Wish you all the best......

  15. Hello Buddy, please can I get a comment plugin like yours??? I use the boring blogger comment box style. I tried Disqus, my viewers complaind of it loading too slow and not rendering sometimes. Thanks. I sure will add this facebook plugin today. Thanks again.

    1. Miller John :: Hello Buddy, I am using the blogger comment system itself on this blog. It is just I have customized it to suite my needs. I have tutorials already published about customizing it like Changing the default status messages or comment box style etc. Please go through the sitemap to search them.


  16. Tested and working!!! This awesome feature is up on my website. I followed the steps patiently and its 100% working. like all the features on my website now is because of your brilliance man.... I appreciate you. please dont stop.

  17. Hi mate, I am facing an error that div element should not be added in head area. Can you please fix this issue?


  18. sir please my help facebook popup like box not add my template body tag below code not add an error show error please help sir what is my mistake. please .... my blog check

  19. Another great tutorial. Thank you so much for all your help. Your site has been an invaluable resource to my blog. :)

  20. Many many thanks for your excellent post. please visit Buy facebook likes For facebook Service buy facebook likes

  21. Thank you so much it is well working with my Health and Lifestyle Blog.... My Blog looks great now.. Check it out Great.