Hello friends welcome to the Techtspot blog, today I will show you how to insert or add Facebook page popup widget in the Blogger blog with pictures.
What is the Facebook page popup widget?
Facebook page popup box is a gadget when we add this gadget to our blog it shows in the middle of the blog screen, whenever visitors visit our blog posts or pages then Facebook page popup box will appear in the middle of the screen, and users or visitors can easily like or follow our company page.
Why we need to add a Facebook page popup widget in the blog?
Adding Facebook page popup gadget or widget in our blog or website blog, we can receive a nice number of followers obvious it will be increasing our followers on the Facebook page and when we publish a new article or share content on our page then our followers get an update and they can easily visit our newly published or existing article, here we receive a nice amount of web traffic and user engagement, now let's start.
These are the Following Steps:-
Step
1: First go to the Blogger blog dashboard and click the Layout option, now find out the place where you want to add the gadget and click Add a Gadget link.
Step
2: In the popup screen, we select HTML/JavaScript gadget.
Step
3: Here we edit our Facebook page URL first then copy the code and paste it in the content area and click the Save button.
<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(1000).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/pages/techtspot&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="https://techtspot.blogspot.com/2018/03/add-popup-facebook-like-box-in-blogger.html" rel="nofollow">Techtspot</a></div></div></div>
Above the page popup code, you just replace the Red URL with your Facebook page URL.
Step
4: Now open the Blogger blog to check the results.
Now Visit the - Demo Blog to see the result.
Above I give you my demo blog link, where I enabling Facebook Page Popup widget, if you are thinking to set up a Facebook Page Popup gadget in your blog then first look at the gadget how it looks like in the demo blog, when you open my demo blog and you just close the page popup gadget then again it's not showing to you and if you want to show the page widget then open my demo blog in incognito mode.
Read More:-
nice
ReplyDelete