Stylish Facebook Popup Like Box Widget For Blogger

facebook popup like box widget with light box effect.

As you all know social media plays vital role in setting up your blog on blogosphere. Social media plays really an important role in increasing your blog's traffic, improving off page SEO etc.

So, that's why in today's post we will talk about facebook or how to get more traffic from facebook by just adding facebook popup display like box on your blog.

Facebook is the leading social media company having 1.5+ billion users (increasing day by day) from which 800+ million people logs in daily. So, just think once how much traffic you gonna get from facebook for free.

Facebook also have paid ad feature. Which charges from $0.25 - $10 per like it depends. So, just think if you wanted to purchase 10 likes, you may be charged $10 - $100. But what it I teach you to get total organic likes for free. For this you do not have to do anything, except copy and paste.

I have created facebook popup like box widget which displays to your visitor whenever they visit to your blog. So interested people will eventually like your blog page and you're saving advertisement money. Isn't it cool ?

You can also add awesome floating facebook like box widget on your blog or popup for facebook like box with timer.

Some cool facebook posts your must wanted to read,

Before moving a head I just wanted you to read below stuff to create organic backlinks from facebook and other social media sites. Backlinks are the links coming from others blog on your blog. So, this is important too, if you wanted to improve your blog's traffic.

So, now lets quickly see,

How To Add Facebook Popup Like Box Widget :

The look you have already seen in the above snap shot. So, let directly move to the implementation part.

Step 1 :- Go to blogger.
I recommend you to take backup of your blogger template before making any change into your current template.

Step 2 :- Go to layout.

Blogger dashboard >> layout >> Add a gadget.

Step 3 :- Now select HTML/JavaScript.
Look at the snap shot below.

Step 4 :- Copy and paste the below mentioned code.

#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>

jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).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>

<div id="fbox-link">
Powered by <a style="padding-left: 0px;" href="http://goo.gl/wvqSdJ" rel="nofollow">SolveMyHow</a></div>
</div>
</div>

Step 5 :- Change solvemyhow facebook page url with yours.
Find the comment,



<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/Solve-My-How-224381897766657&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>

Now change the highlighted part with your specific page url.

Step 6 :- Change the delay time.
This popup widget will appear after 10 seconds, when your blog/website is fully loaded. If you wanted to make any changes into the timer then find the comment,



jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(10000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}


Now, look at the highlighted part. Here 10000 means after 10 seconds. You can make it less or more according to your own choice.

Step 7 :- Setting up the cookie.
Here the popup will display only once to the visitor whenever he/she visits any page or post of your blog. But instead, if you want that the popup will display every time when the new page/post is loaded. Then you have remove the below mentined code. So find the comment,



$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });



Just remove the highlighted part of code.

Step 8 :- Save the widget and visit your blog.
Now after 10 seconds you will see facebook popup widget. If it haven't displayed to you after 10 seconds then you have to delete your browser cookies. Just run Ccleaner software once (or you can delete manually) and restart your browser.

That's it. You're done now. This will sure increase you facebook fan following which is certainly an important parameter, if your wanted to increase your blog's traffic.

If you are the regular reader of solvemyhow then you might know the importance maintaining mailing list. You must collect email id's of your visitors so lately you can turn them into your readers. This is also an important thing which you must implement on your blog. Below mentioned tutorials will guide you to do so,