Today, We want to share an updated New Popup Facebook Like box for blogger , tumblr and wordpress blog.This widget designed like Facebook Page Promoter Lightbox. It's looks awesome and surely to increase your facebook page likes.
 |
| Facebook Page Popup Like Box |
Features:
- Facebook page is needed
- Display the facebook lightbox onload with or without a delay
- Limit the lightbox to once every x days per individual visitors
- Promote your own facebook fanpage
- No api key needed (works with iframe, premium version uses xfbml and requires api key)
- Close popup box instantally click on close button or click on any where in the browser window.
How to Install Facebook Popup Like Box in Blogger Blog
- Go to Blogger>> Your Blog >> Layout >> “Add a Gadget’. If you are new, follow the link below to add HTML and Javascript widget into your Blogger blog.
- Now add the following given below codes in your blogger widget box.
<!-- Brought to you by www.digitalhubinc.com --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGA5vUUrYgRkOYk6YHkUqqL9TfE419cvMdjdsz3ltOb5iEOoG3GbpOm1VxCot-GuFv0F8KHZaZjSriit5Ryo2_EvcFN6sd3e9bjpKE-cJyRcWyqBPEqEdjheWTa7wdDPuCUSl6MMzyhY/s1600/circle-close.png) no-repeat;
height:15px;
padding:25px;
position:relative;
padding-right:10px;
margin-top:-15px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</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_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 0 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FDigitalHubInc&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 415px; height: 215px;" allowtransparency="true"></iframe>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<!-- Facebook Popup Widget END. Brought to you by www.digitalhubinc.com -->
- Save Widget.
Where to find the code?
If you've installed the widget by clicking "Add to Blogger" you'll need to locate the code in order to make customizations. In order to find the html go to the blogger dashboard>Layout. Click "edit" on the "HTML/Javascript" gadget.
Enter your facebook username
Search for http://www.facebook.com/digitalhubinc and replace it with your site's facebook page URL.
appId=408184442589211"
and change the appID for your Facebook Page.[How to get appID full details given below]
Change the 20 Second Time Delay
By default the widget pops up 20 seconds after the page finishes loading. Search for the code below and change the number 20000 to a greater or lesser number.
1 second = 1000. 10 seconds = 10000. 60 seconds = 60000.
Popup every time the page loads
By default, the like box widget 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:
The Jquery, if you already have in your template then remove.
Display only when user visits your homepage
You can do this by surrounding the widget code with these conditional tags below. Go to Template > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag. Make sure to include the conditional tags below.
OR
Another Facebook Popup like box widget for blogger
- Go to Blogger>> Your Blog >> Layout >> “Add a Gadget’. If you are new, follow the link below to add HTML and Javascript widget into your Blogger blog.
- Now add the following given below codes in your blogger widget box.
<style type="text/css">
#digitalpopup {background-color: #fff; overflow:none;}
.digitalpopup {width:400px; height:250px; position:fixed; top:50%; left:50%; margin-top:-150px; margin-left:-200px;}
#digital-popup {position:absolute;}
#digital-popup {
display:block; top:0px; left:0px;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
margin:0; overflow-y:auto;}
</style>
<div id="digital-popup">
<div id="digitalpopup" class="digitalpopup">
<center style="cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;"
onmouseup="document.getElementById('digital-popup').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGA5vUUrYgRkOYk6YHkUqqL9TfE419cvMdjdsz3ltOb5iEOoG3GbpOm1VxCot-GuFv0F8KHZaZjSriit5Ryo2_EvcFN6sd3e9bjpKE-cJyRcWyqBPEqEdjheWTa7wdDPuCUSl6MMzyhY/s1600/circle-close.png"/>
</center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FDigitalHubInc&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 400px; height: 250px;" allowTransparency="true"></iframe>
</div>
</div>
- Save your widget.
Note : onmouseup jquery code source : Style display Property
How to Install Facebook Popup Like Box in WordPress Blog
- Login to your WordPress admin area
- Navigate to plugins page and click on “Add new” button
- Search for “Facebook Page Promoter Lightbox” and install the plugin , activate it
- Click on “Arevico Settings >> Facebook Lightbox”
- Now you need your Facebook fan page ID, getting your Facebook fan page ID is described step by step below
- Enter Facebook fan page ID in the respective text box once you obtain it
- Specify between 4 to 8 days in “Show every x days” input box and 10000 to 15000 in “Delay in ms” box, this is the best setting which will not annoy your visitors with Facebook light box each time they visit your blog.
- That’s it, finally click on “Save Changes” button.
HOW TO GET FACEBOOK FAN PAGE ID?
Here is the step by step guide to get Facebook fan page ID
- Login to you Facebook account
- Go to your Facebook page’s admin panel
- Now click on “Edit page” and then on “Update page info” menu option
- get Facebook fan page ID
- Scroll to bottom of the page where you get your Facebook fan page ID.
0 comments:
Post a Comment