Add Pop Up Facebook Like Box For Your Blog

Facebook is the largest social sharing website.Most of the bloggers use it to develop their website.There are different social sharing icons to increase the traffic sources.Here is the pop up facebook like box for increasing the visitors to your site.



By adding this pop up box  the number of likes to your facebook page will be increased.


To add the facebook pop up like box to your blog follow the below steps:

Step 1: Goto Dashboard-->Layout-->Add A Gadget-->Html Javascript

Copy and paste the following code in it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
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%}#cboxMiddle
Left,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:a
uto}#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(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/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(http://4.bp.blogspot.com/-
_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/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}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fspiceupblogging&amp;width=300&amp;
colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;
stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true">
</iframe>
</center><p style=" float:right; margin-right:35px; font-size:9px;" >Get This <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.spiceupblogging.com">SpiceUpBlogging</a></p>
</div></div>

Step 2: Replace spiceupblogging with your facebook page name.

Step 3: This is designed to appear the likebox once. If you need this to appear all times of loading your site, then change the value true to false.

Step 4: Now save the gadget.

Note: To make your widget appears only on your homepage do the following.
Add the following code before the provided code.
< b:if cond='data:blog.url == data:blog.homepageUrl'>
And add the following code after the provided code
< /b:if>

If You Enjoyed This Post Please Take 5 Seconds To Share It.

9 comments:

  1. Great! But, this does not work in Blogger's Dynamic templates.
    http://www.techscratched.com

    ReplyDelete
  2. good post. But it is not working in IE.
    could you please let me know how to solve this.

    my blog is www.ncooltips.com

    Thanks you very much for the nice post.

    ReplyDelete
    Replies
    1. This is perfectly working on IE.
      I checked your site.

      Delete
  3. Good post, but the pop up window cannot be closed !!!! what can i do please???

    ReplyDelete
    Replies
    1. It has a close button at the bottom right corner.

      Delete
  4. i want to do this permanently in my blog nd nt only once... I couldn't find VALUE there ... please help

    ReplyDelete
  5. Hi.. This is great. Could you please add the part where the window doesnt popup if user has already liked the page? Thank you!

    ReplyDelete

Abusive Comments are not allowed on this site.
Don't post comments with links included..