Facebook has become the powerful and biggest social media networking site on the internet which have already more than 1.5 Billions Users, an at least according to a survey report, there are 900 million people login to the Facebook dashboard in a single day. In this article, I’ll tell you how to add Facebook pop up widget into your blogger blogs which is very awesome and simple, and attracts more visitors to your Facebook page and getting more likes.
If you want to produce and efficient and effective media campaign, you will choose many social media platforms but the most powerful and amazing networks is Facebook.
Simply share your contents / posts using your Facebook Page. In the past articles, we share a how to add Facebook like button, and also share a how to add Facebook Static widget , and how to add a Facebook Like Box in Blogger which is a very popular in our site. Today we share a widget which you can add and whenever anyone comes to your site, it will appear, and more chances you getting more likes to your business Facebook Page.
How To Add Facebook Popup Like Box Widget in Blogger
Note : You can use this code, and adding this widget any where or any platform where you want like Blogger, WordPress, Tumblr, Joomla or any other. But here i’m only show you how to add this Facebook Like Box Widget into your Blogger blogs.
Step 1 – First of all login into your blogger dashboard.
Step 2 – Select your blog where you want to display this awesome widget.
Step 3 – Now go to “Layout” and then click on “Add a Gadget” link on any where.
Step 4 – A popup window open, now find a “HTML / JavaScript” gadget from them .
Step 5 – Copy below code and paste in this box.
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>
<style> /* Powered by : www.bloggerhope.com */
#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: 0px;
top: 0px;
}
#fbox-button:before {
content: “CLOSE”;
padding: 5px 8px;
background: #828282;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: #aaaaaa;
font-size: 9px;
text-decoration: none;
text-align: center;
padding: 5px;
}
</style>
<script type=’text/javascript’>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie…
if (arguments.length > 1 && String(value) !== “[object Object]”) {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === ‘number’) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), ‘=’,
options.raw ? value : encodeURIComponent(value),
options.expires ? ‘; expires=’ + options.expires.toUTCString() : ”, // use expires attribute, max-age is not supported by IE
options.path ? ‘; path=’ + options.path : ”,
options.domain ? ‘; domain=’ + options.domain : ”,
options.secure ? ‘; secure’ : ”
].join(”));
}
// key and possibly options given, get cookie…
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp(‘(?:^|; )’ + encodeURIComponent(key) + ‘=([^;]*)’).exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type=’text/javascript’>
jQuery(document).ready(function($){
if($.cookie(‘popup_facebook_box’) != ‘yes’){
$(‘#fbox-background’).delay(8000).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/TechoraNet&width=402&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://www.bloggerhope.com” rel=”nofollow”>BloggerHope</a></div>
</div>
</div>/* Powered by : www.bloggerhope.com */
Step 6 – Now press “Save” button and view you blog for live result.
Remember Some Customization’s
After adding this widget into your blogger blog, now made some customization in it.
First of all change the URL red color, with your own Facebook Page URL.
https://www.facebook.com/TechoraNet
This widget will appear after 8 seconds after page loading complete. If you want to change this setting , then simply change the 8000 number with your requirements.
.delay(8000).
Generally, this widget will appear only one time after page load complete, and if you want to display this widget all the time, when page load , then remove this line of code from this widget.
$.cookie(‘popup_facebook_box’, ‘yes’, { path: ‘/’, expires: 7 });
If you want to show this widget only in the hompage , then add this piece of code into your Template, click on Edit HTML button and search this tag.
</body>
Now copy below code and paste just above this tag.
<b:if cond=’data:page.type == “index”‘>ADD THE FACEBOOK WIDGET CODE HERE </b:if>
Now your all work done, see your blog and check the result, if any of setting you also want then customize it according to your requirements. And if any difficulties you face, then don’t worry, comment below this post, and i’m reply you as soon as possible.
