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
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.
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
Step 4) Select “HTML/JAVASCRIPT”
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.
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.
Source: https://www.bdbloggerhub.com/2020/08/add-facebook-pop-up-like-box-blogger.html