How to Add Facebook POP-UP Like Box Widget in Blogger

SHARE:

Follow my easy steps to easily add custom pop-up facebook like box in your blogger blog. This will only take a few minutes to add w/o coding knowledge

custom facebook pop up like box for blogger blog

Adding a pop-up facebook like box widget in blogger is very easy. In this post I’ll show you how you can add a facebook like box that will pop-up after a certain time (you can customize the delay). Pop-up like box widgets are very effective in increasing likes for your pages.

Facebook has been the biggest social media site for years. Everyday millions of people use facebook to interact with friends, family or to promote products or services. Social medias are the leading way to promote something as they have millions of active users everyday, and facebook is on top of them.

facebook pop up like box



Your visitors are more likely to like your page if they see a pop-up of it. They would want to get connected with you in social media to get updates, help and/or to purchase a product. This way your page fan base will keep getting bigger.

As you surf through the internet you see lots of the website show a pop-up of their facebook page. You might think it is only possible in wordpress, but it’s possible to add these pop-ups in your blogger blogs too. It’s not even that hard to do it. You don’t even need to know any coding to do it. All you have to do is, copy and paste some codes in your widget area and enjoy.

Just keep following this step by step guide and you also, will be able to add this professional looking pop-up in your own blog. Well then, without any further ado,

Let’s get Started –

Step 1) Login to your Blogger Account

Step 2) Choose your desired blog (if you have multiple blogs, if not, then skip to step 3.)

Step 3) Go to layout and click on add a gadget

blogger add a gadget



Step 4) Select “HTML/JAVASCRIPT

blogger add a gadget



Step 5) Copy the below codes and paste it in the content box. Leave the title area blank.

[<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/bdbloggerhub&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://bdbloggerhub.com" rel="dofollow">BDBLOGGERHUB</a></div>
</div>
</div>]

Customizing the Widget

After you have pasted the codes in the box, Don’t save it yet. You need to do a little customization.

Part 1) [MUST] Change the blue https://www.facebook.com/bdbloggerhub with your own facebook page link.

Part 2) [OPTIONAL]  By default, the widget is set to pop-up after 5 seconds. Means visitors will see this pop-up 5 seconds after visiting your website/blog. If you want to change the time, change the “5000” value of the below code according to your need. Remember, this value is in milliseconds. i.e: If you want it to pop-up after 3 seconds, change the value to 3000.

[.delay(5000)]

Part 3) [OPTIONAL] If someone visits your blog, he/she will see this pop up once a week. If you want them to see this every time they reload your site, just delete the below line from the code.

[$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });]

[Important] If you add this pop-up facebook like widget as a widget, this will pop-up in every page. Now, If you want to show this widget just in homepage, then you can do it by editing the EDIT HTML option. Just delete the widget from layout and follow the steps below – 

Step 1) Go to Theme > Edit Html

If you are using the updated version of the blogger dashboard, go to theme, click on the 3 vertical dot and select Edit Html from there.

edit html blogger theme

edit html blogger theme


Step 2) Search for </body> . Press CTRL+F to bring up the search bar.

Step 3) Copy and paste the below code just abode the </body> tag.

[<b:if cond='data:page.type == "index"'>ADD THE WIDGET CODE FROM ABOVE HERE</b:if>]

Step 4) Click on save and save the template.

You have successfully added the facebook pop-up like box widget in your blogger blog.

Final Words

I hope this tutorial was detailed enough for you to understand. If you liked it, please share it with your friends. Have question(s)? leave a comment down below.

COMMENTS

BLOGGER
Name

Adsense Tips,2,Blogger,5,Blogger Widgets,3,Blogging,8,Money making tips,3,SEO,5,tech,2,Tips & Tricks,10,
ltr
item
BD BLOGGER'S HUB | SEO, BLOGGING, ADSENSE, ONLINE INCOME: How to Add Facebook POP-UP Like Box Widget in Blogger
How to Add Facebook POP-UP Like Box Widget in Blogger
Follow my easy steps to easily add custom pop-up facebook like box in your blogger blog. This will only take a few minutes to add w/o coding knowledge
https://1.bp.blogspot.com/-TkFDkMphbdE/XyiKAJR1foI/AAAAAAAAAO4/OAsJFXN5Hs8TQp6RH1g9Sqj70lAA7LYpwCLcBGAsYHQ/w640-h360/Simple%2BWork%2BBlog%2BBanner%2B%25281%2529-min.jpg
https://1.bp.blogspot.com/-TkFDkMphbdE/XyiKAJR1foI/AAAAAAAAAO4/OAsJFXN5Hs8TQp6RH1g9Sqj70lAA7LYpwCLcBGAsYHQ/s72-w640-c-h360/Simple%2BWork%2BBlog%2BBanner%2B%25281%2529-min.jpg
BD BLOGGER'S HUB | SEO, BLOGGING, ADSENSE, ONLINE INCOME
https://www.bdbloggerhub.com/2020/08/add-facebook-pop-up-like-box-blogger.html
https://www.bdbloggerhub.com/
https://www.bdbloggerhub.com/
https://www.bdbloggerhub.com/2020/08/add-facebook-pop-up-like-box-blogger.html
true
1150118172119971250
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content