Best Facebook Pop Up Button For Website/Blogs(Blogger,WordPress..etc)

Perhaps,You have touched with this post, How Social Network Influence in Tracking website traffic for a certain Limit,If you are not aware about this ..Please read this Post first.


In fact,we can't forces our visitors to drop a like on our Facebook,twitter,Google plus pages.So,what we have to do,Disturb or tackle the mind with mind freaky pop up buttons on it( on our webs ) in a pop up manner.Most probably many of them closes,many of them probably not aware this also. Basically,Young bloggers or new bloggers.So,they drop a like and wait for our updates.

Now a days,Facebook is standing first in the social networking,and the arrival of smartphones boost up their facilities along with it.so that viewing web version also made easy through it.

Hence Pop up Button Forces 40-50% visitors to drop a like on our webs,If we adopts frequent updates.

Now have a look How to Add Pop Up button or Pop Up Like Box For Websites.
Here I will Give an Example about Blogger Blog.

Go to Blogger Dashboard>> Layout>>Add a Gadget>> Html/Java script>>Paste the Below 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/AVvXsEgcrpbkugmzJu3BMKzYJ3FtxDtpYia_zwSKI6vVAkc_ih4VMvIZFSbY7G23-pEKMKRj3FvDelnPorq4tE6ZFHNgHmV0o6Gfsj-MrANFzw_-leV-nTknKE6MJ7OP1_0WnWnYGK8IqIogsylg/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(15000).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=https://www.facebook.com/pages/Best-Blog-Tricks-Official/339755399486549&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"><a href="http://www.bestblogtricks.com/2013/12/best-facebook-pop-up-button-for.html">Facebook Like Box</a> <a href="http://www.bestblogtricks.com">Widget</a></span></center>
</div>
</div>
                               
Note 1:

Replace https://www.facebook.com/pages/Best-Blog-Tricks-Official/339755399486549 this link with your Facebook and Save it.


Here the pop up Maintains 15 second pop up.So In order Increase of decrease the delay period. You can change by
1 sec= 1000
10 sec= 10000
20 sec= 20000
30sec= 30000
Like this we can increment or decrements the  time period up to our decision.

Note 2:

If you wan't to pop up button on every page of your posts .Then remove this Html code from this.
                 
                       $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });


Conclusion:

By default setting delay time period enhances and you can easily tackle the mind of your visitors as well in tackling a single like on it.

Post a Comment

Previous Post Next Post

Contact Form