Saturday, April 12, 2014

How To Add Facebook Pop up Widget To Your Blog and Get More Likes!

Hi There!

I just installed the Facebook pop up widget on my blog and want to share with you how i do that,I try two codes


The first one i like it because show up after 7 second from opening the blog and is very fast,But the bad thing in this one is you can't modification the time and the box will show up one time in 30 day for each visitor.





The second Facebook pop up widget is very low,show up after a 10 to 15 second from opening the blog and loading slowly,but the good thing on it is you can modified in the show up timing,where you can adjust to show up every day and it show up with a good phrase "Receive all updates via Facebook. Just Click the Like Button Below..."





The benefits of installing the Facebook pop up fan box is to increase your Facebook likes for your blog or website.


So how you can do that?Just follow the steps below and you will install it successfully:


The first Facebook pop up widget:



Add Widget to Your Site:

Go to blogger>Template>Edit Html.
Search for </body> and add the below code before the </body>
and save the changes.

This code may be give some errors when you will add it in blogger,so go first to the HTML PARSER and change the good to be familiar with blogger,and add it to your blog.
____________________________________
<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/AVvXsEhji1IyrtbUoXvTFNuzbZ_T6XH-GdJFkXThLCwp4Vq8_MnY3ZFHotO8uAm9lEuTsQLKpdomVeva5qzzbYjFa_7Kne4A_3qVlREId4la6VYcM_JUwEA5EFicFw8Ns13WyMSq8taGEwP2Agrv/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 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(100).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/theblogwidgets&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.theblogwidgets.com/2013/08/facebook-popup-widget-with-lightbox.html">Facebook Popup Widget</a></span></center>
</div>

</div>
_____________________________________

How to Customize
  • Search for href=http://www.facebook.com/theblogwidgets and replace it with your site's facebook page URL.
The second Facebook pop up widget:

This code is good,you don't need to change it by HTML PERSER,Juts Go to Blogger>Template>Edit Html,Search for </body> and add the below code before the </body> and save the changes.
____________________________________
&lt;script src=&#39;https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js&#39;&gt;&lt;/script&gt;
&lt;script src=&quot;https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=false&#39;) == -1)
{
var fifteenDays = 1000*60*60*24*1;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
$.colorbox({width:&quot;400px&quot;, inline:true, href:&quot;#exestylepopups&quot;});
}
});
&lt;/script&gt;

&lt;style type=&quot;text/css&quot;&gt;
/* ColorBox v1.3.16(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)*/
#colorbox, #cboxOverlay, #cboxWrapper{
position:absolute;
top:0;
left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay{
position:fixed;
width:100%;
height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft{
clear:left;
}
#cboxContent{
position:relative;
}
#cboxLoadedContent{
overflow:auto;
}
#cboxTitle{
margin:0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic{
position:absolute;
top:0;
left:0;
width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
cursor:pointer;
}
.cboxPhoto{
float:left;
margin:auto;
border:0;
display:block;
}
.cboxIframe{
width:100%;
height:100%;
display:block;
border:0;
}
#cboxOverlay{
background:#000;
opacity:0.5 !important;
}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{
width:14px;
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat 0 0;
}
#cboxTopCenter{
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DcOuQq7ap3jgrLDA1DoK5oC5E46Pd_21PhdXFNvmKYwXGt6DE02aN1M98BX5iaPRV3yM35vAexnCASJVAeAxZ89-vhUttk4Q67M0bpOwcdqaaF66J0-tLd0HjO3Jm9TOZYM9NjAfSZs/s400/border.png) repeat-x top left;
}
#cboxTopRight{
width:14px;
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat -36px 0;
}
#cboxBottomLeft{
width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter{
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DcOuQq7ap3jgrLDA1DoK5oC5E46Pd_21PhdXFNvmKYwXGt6DE02aN1M98BX5iaPRV3yM35vAexnCASJVAeAxZ89-vhUttk4Q67M0bpOwcdqaaF66J0-tLd0HjO3Jm9TOZYM9NjAfSZs/s400/border.png) repeat-x bottom left;
}
#cboxBottomRight{
width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft{
width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) repeat-y -175px 0;
}
#cboxMiddleRight{
width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) repeat-y -211px 0;
}
#cboxContent{
background:#fff;
overflow:visible;
}
#cboxLoadedContent{
margin-bottom:5px;
}
#cboxLoadingOverlay{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL08hTya00-Gh9e8IUUsexlT9Rw035HZlRRMb8WvZA1M3MpQp4gMdee4djqpyMbpJReCIDUov3FEfWmBEWzDwQoseu2WOzj5u916hf7keKcJxw7YS8oF9pJlJo4S2ayegX2x1Vp0nrnbA/s400/loadingbackground.png) no-repeat center center;
}
#cboxLoadingGraphic{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkbQtZVJD4xbkBspK0TiOpZ8dtr5ccIgNoRwnH4g8aeIyKLRUX9UdHRSlGoOVIPTcfhe0HbZjaALU5yGG8U6jAUNEkyitV2TISFaLFJWUfYi5e3te8yExOJGVjC9c9v62s1ueJ8YpuzE0/s400/loading.gif) no-repeat center center;
}
#cboxTitle{
position:absolute;
bottom:-25px;
left:0;
text-align:center;
width:100%;
font-weight:bold;
color:#7C7C7C;
}
#cboxCurrent{
position:absolute;
bottom:-25px;
left:58px;
font-weight:bold;
color:#7C7C7C;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
position:absolute;
bottom:-29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat 0px 0px;
width:23px;
height:23px;
text-indent:-9999px;
}
#cboxPrevious{
left:0px;
background-position:-51px -25px;
}
#cboxPrevious.hover{
background-position:-51px 0px;
}
#cboxNext{
left:27px;
background-position:-75px -25px;
}
#cboxNext.hover{
background-position:-75px 0px;
}
#cboxClose{
right:0;
background-position:-100px -25px;
}
#cboxClose.hover{
background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow{
background-position:-125px 0px;
right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover{
background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow{
background-position:-150px -25px;
right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover{
background-position:-125px 0px;
}
#mdfb{
font:12px/1.2 Arial, Helvetica, San-serif;
color:#666;
}
#mdfb a, #mdfb a:hover, #mdfb a:visited{
text-decoration:none;
}
.mdbox-title{
background:#000;
color:#fff;
font-size:20px !important;
font-weight:bold;
margin:10px 0;
border:20px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow:5px 5px 5px #CCC;
padding:10px;
line-height:25px;
font-family:Arial !important;
}
&lt;/style&gt;

&lt;div style=&#39;display:none&#39;&gt;
&lt;div id=&#39;exestylepopups&#39; style=&#39;padding:10px; background:#fff;&#39;&gt;
&lt;center&gt;
&lt;h3 class=&quot;mdbox-title&quot;&gt;
Receive all updates via Facebook. Just Click the Like Button Below...
&lt;/h3&gt;
&lt;/center&gt;
&lt;center&gt;
&lt;iframe src=&quot;//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYourFirstDollarsFromTheInternet
&amp;amp;width=300
&amp;amp;colorscheme=light
&amp;amp;show_faces=true
&amp;amp;order_color=%23ffffff
&amp;amp;stream=false
&amp;amp;header=false
&amp;amp;height=258&quot;
scrolling=&quot;no&quot;
frameborder=&quot;0&quot;
style=&quot;border:none; overflow:hidden; width:300px; height:258px;&quot;
allowtransparency=&quot;true&quot;&gt;
&lt;/iframe&gt;
&lt;/center&gt;
&lt;p style=&quot; float:right; margin-right:35px; font-size:9px;&quot;&gt;Powered By &lt;a style=&quot; font-size:9px; color:#3B78CD; text-decoration:none;&quot; href=&quot;http://www.exeideas.com&quot;&gt;EXEIdeas&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
____________________________________

How to Customize
  • Search for YourFirstDollarsFromTheInternet and replace it with your  facebook page name or ID.
How to change the show up time: 
  • Search for  var fifteenDays = 1000*60*60*24*30; and change the 30 with any time you want.
That is it,If the post like you share it with your friends :).

10 comments:

  1. Anonymous4:18 PM

    This is the right blog for everyone who would like
    to find out about this topic. You know so much its almost hard to argue with you (not that
    I personally would want to…HaHa). You certainly put a fresh spin on a topic that has been written about for years.
    Excellent stuff, just great!

    Stop by my site :: get more facebook likes

    ReplyDelete
    Replies
    1. Thank you for your Compliment bro ^_^

      Delete
  2. Having an army of Facebook fans is not just a status symbol now- a- days as it has a lot of economic value.

    ReplyDelete
  3. Fantastic, I'm enjoyed read this post, Every time search this type of post. Really I enjoyed. This article is really very interesting and effective. I think its must be helpful for us. Thanks for sharing your informative. If you update your Social media profile? Check me out Buy Facebook Likes

    ReplyDelete
  4. Did you know that you can create short links with BCVC and receive money for every visit to your shortened urls.

    ReplyDelete
  5. Thank you for the impressive post.

    ReplyDelete
  6. The post is very nice. I just shared on my Facebook Account.

    ReplyDelete
  7. Thank you for the impressive post.

    ReplyDelete

Got an opinion?

Powered By Blogger · Designed By Seo Blogger Templates

Is Very Hard To Click On "Like",But I Know You Can Do It :).

Powered By EXEIdeas