From a blogger's perspective, the more Facebook fan your blog page have, the more popular it is. That is to say that somehow, the popularity of a blog is solely tied to the number of fans it has on Facebook(Not necessarily :3). How true is that?It doesn't matter here! xD. In this tutorial, I want to show you guys how to add a Facebook pop up Like/Fan box to your website, Blogger and WordPress page. For the pop up to work, you should already have a Facebook fan page.[This is what people call as stating the obvious B)]
How it Works(The Crap part :3)
Facebook "pop up" like button is a Facebook plugin which allows the visitor simply clicks on the like button and is immediately added to the Facebook Fan list of the webpage and automatically starts receiving the website or blogs updates on his/her Facebook page. Once the visitor click on the like button, a cookie is sent to the visitor's browser making the pop up like box not appear again on that browser unless you specify in the script i'm gona provide here that the pop up should appear again after some specific time or date.How to Add the Facebook Pop Up Like Box to your Blog/Website(The Good Part =D) |
Adding the Like Box to Website,
- Open your website's HTML file in a HTML editor.
- Copy the code I have provided below and paste it anywhere in between the body tags.
- Save the HTML file and you are done.
Adding the Pop Up Like Box to WordPress,
- Go to Dashboard>>>Appearance>>>Widgets.
- Add a Text widget to sidebar.
- Now open the text widget.
- Copy the code below and paste into it. Leave the title as it is (i.e. blank).
- Then Save.
Adding the Like Box to Blogspot,
- Go to your Blogger Dashboard.
- Navigate to Layout>>>Add a Gadget.
- Scroll down the list and select HTML/JavaScript.
- Copy the code I have provided below and paste into the HTML/JavaScript box (leave the title blank).
- Finally click on Save.
The Code
<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;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hetSE-FUESsLpfLUeFPRVYhPSbVZ8iOCKS97wrhGj5fTixpebGsLG1MgSnmwhOkQKYaAkhYiXYNgIA54u764Wjx9Lf11CMVYpFuyZg6u6H5rBBNHus36Q-mnsIMDT-j3SO_FCgeGNamd/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</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(20000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/techkmate&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit">Powered by <a href="http://www.techkmate.com/search/label/Widgets">TechkMate.com</a>
</span></center></div>
</div>
NOTE: After you copy and paste the code change the URL "http://www.facebook.com/techkmate" to your Facebook page URL and then save it! =D
Changing the number of times the Box appears: This like box is set by default to appear only once to the visitor if he/she clicks the like button. If you want the like box to show up every time any of your page loads, then locate and remove this line of code in the code as I have provided above.
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
Thank You! :D
If you have any kind of difficulty-You can comment here and i'll be pleased to help you!
0 comments :