Facebook Popup like Box Widget for Blogger

Hello and welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article is about Facebook Popup like Box Widget for Blogger. Facebook become the leading social media service on the internet playing host to over 1.3 billion users of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.



In order to produce on effective digital campaign, you absolutely must take advantage of social media by doing things like integrating Facebook on Blogger. Email marketing can be useful but it comes with restriction that could limit your blogs potential. Perhaps the most significant problem is that email don't come with a face or personality like Facebook does.


When someone reads your content and appreciates the king of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a "Like Box" to your Blogger site so that you can began taking advantage of these great opportunities.



How to Add the Facebook Popup Like Box Widget 

  1. Log in to your Blogger account and select your blog> go to Layout and Click the Add a Gadget link on the right side.
  2. Once the Popup window is open, select the HTML/JavaScript gadget from the list

  3. Then Copy and Past the following code inside the empty box.
<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/pages/Getwebinfo/&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://helplogger.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">Helplogger</a></div>
</div>
</div>
4. Now Press the "save" button to add the widget to your blog. That's it you can all don.

Facebook Popup Like Box Customization.

After adding the code just replace the address in blue  https://www.facebook.com/pages/Getwebinfo/ with your sites Facebook page URL.

The widget will appear 5 seconds after the page finishes loading. If you want to change this delay change number 5000 to a greater or lesser numbers in this part.

.delay(5000)

By default the like box only shows up the first time the user visits your page. If you would like the Facebook box to popup every time the page loads, then remove this line of code.

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

If you want to display only when user visits your homepage, go to "Template"> hit the "Edit HTML" button on the right side a search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:    </body>

After finding the below tag just paste the Facebook popup widget right above the body tag and make sure to include the conditional tags below.

<b:if cond='data:page.type == "index"'>ADD THE FACEBOOK WIDGET CODE HERE </b:if>
 After saving this widget, you can test it out by returning to once of your old post which should bring up a little popup widget asking if you had like to join the site's Facebook Page.

I Hope this article is really helpful for you if you like this article so please share it on social media thanks for reading.

Post Tags: facebook widget for blogger, Pop up widget for blogger. Facebook Like box widget for blogger, Facebook, 

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.