How to put Facebook popup like box widget in Blogger?

How to put Facebook popup like box widget in Blogger? Facebook is such a social network through which we can make new friends along with our family members, relatives and friends. As much as it helps us in strengthening our relation, it can also help in increasing the traffic of our business and our website or blog. If you have created a Facebook page for your blog, then daily you will be giving updates related to your blog above, then you should put a Facebook like box on your blog, so that visitors to your blog can follow you through your fb page.

You must have heard the name of Facebook like box widget, but today we are going to tell you about Facebook popup like box widget.

What is a Facebook popup like box widget?

Assuming you have installed the Facebook like box widget in the sidebar of your blog, your fb widget will not be visible to them until visitors to your blog complete the scroll down. But Facebook popup like box widget will be visible to your visitor through popup when they visit your blog. Popup simply means seeing a widget in front of them.

How does Facebook Popup like box look?

Like the image above, the Facebook popup like box appears, which will show above your bulb and the person who wants to like your page will directly like it or close the widget.

What are the benefits of installing Facebook popup like box widget?

If you use the fb popup widget on your blog, then all visitors to your blog will see fb popup and the chances of liking your fb page will be maximum. With which the follower of your fb page will increase and the traffic of your blog will also increase.

How to put Facebook popup like box in Blogger?

To put Facebook popup like box widget in your blogspot blog, go to Layout >> Add a Gadget >> HTML / JavaScript .

After clicking on HTML / JavaScript , a form will open, where you have to paste the style code below here.

CODE :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <script src='https://aireshalili.github.io/internetsmash/facebook-popup-box.js' type='text/javascript'></script> <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); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=124246297655999&version=v2.3"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <style> #fb-box-background {display: none;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;} #fb-box-close {width: 100%;height: 100%;} #fb-box {background: WHITE; border: 2px solid #090909; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 4px 10px 4px 10px; border-radius: 5px; position: absolute; top: 40%; left: 40%; margin-top: -50px; margin-left: -50px;} #fclose-button {position: absolute;top: -10px;right: -10px;background: #fff;font: bold 16px Arial, Sans-Serif;text-decoration: none;line-height: 22px;width: 22px; text-align: center;color: #000000;border: 2px solid #2F2F2F;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4); box-shadow: 0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 25px;cursor: pointer;} #fclose-button:before {content: "X";} #Poweredby,#Poweredby a.visited,#Poweredby a,#Poweredby a:hover {color: #aaaaaa;font-size: 9px;text-decoration: none;text-align: center;padding: 5px;} #follow-us{font-size: 1.7em;color: #010069;} </style> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#fb-box-background').delay(15000).fadeIn('medium'); $('#fclose-button, #fb-box-close').click(function(){ $('#fb-box-background').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 10 }); }); </script> <div id='fb-box-background'> <div id='fb-box-close'> </div> <div id='fb-box'> <div id="follow-us">Follow us on Facebook</div> <div id='fclose-button'> </div> <div class="fb-page" data-href="https://www.facebook.com/acchibaat" rel="nofollow" data-width="400" data-height="400" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div> <div id="Poweredby">Powered by: acchibaat</div> </div> </div>

Delay time: The fb popup display that will be visible only after 15 seconds of loading your blog page, if you want to reduce or increase this time, you can reduce or decrease 15000. (1000 = 1second)

In this code, enter the URL of your Facebook page instead of  https://www.facebook.com/acchibaat .

$ .Cookie (‘popup_facebook_box’, ‘yes’, {path: ‘/’, expires: 10}) if you want visitors to your blog to show fb pop again and again   ;  Delete it

After doing so , click on the Save button. That’s it your Facebook popup widget is ready, you can check it by visiting your blog to see if it is working properly. If you have been successful in putting fb popup on your blog blog through this tutorial, then please tell through comment. HAPPY BLOGGING