Jun 3, 2012

Add 1 time Facebook popup Like button -Blogger

Add Facebook like button Easy



Today I am going tell you how to Add 1 time Facebook popup Like button to blogger .
Adding Facebook like button will surely help to increase your FB page Like

Follow these simple steps to add Facebook popup Like button to Blogger :-

1:-Login to your blogger >> goto Layout >> Click on Add a Gadget >> and Choose HTML/Java Script


2:-Don't Give any name Title name and put Code below in Code box


<style>




/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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;}
/*








User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#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://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/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://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/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;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/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:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->




<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >?</p></center></h3> 
<center>




<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FVIKASH.BLOGS&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;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://1vikash.blogspot.com/">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://1vikash.blogspot.com/">Blogger Widgets</a></p>
</div></div>


Note :- Replace VIKASH.BLOGS in above code highlighted Pink With your Facebook page url

ex .. http://www.facebook.com/VIKASH.BLOGS = VIKASH.BLOGS

3:- Now all Done save and Enjoy

ANY PROBLEM COMMENT BELOW 

Like this Post ??? Then Pls Support us LIKE US ON FACEBOOK OR Follow OUR Blog :)



Subscribe Updates, Its FREE!

28 comments:

  1. Doesn't seems to work for me. Can u help??
    ...

    ReplyDelete
  2. Where exactly did you place this facebook like button. I can't see it on your blog.

    ReplyDelete
  3. Are you not getting the popup of Facebook like button like as shown in above picture ,while loading the page ?? pls recheck it after 6-7 mins ,it is working and showing to me

    ReplyDelete
  4. What Actually I Have To Enter Ex:- I Have Some Page Like extra torrent for example so what should i add Extra.torrent or www.facebook.com/extra.torrent Like Which One

    ReplyDelete
  5. You just need to add "Extra.torrent" Only

    ReplyDelete
  6. Bro,Its Not Working I Have Tried Many Times This

    ReplyDelete
  7. Dear Rizwan you just find " 1000*60*60*24*30; " and Replace with " 5*60*1000 " ,.you will start getting this in interval of 5 min instead of 1 day ,, hope this will help you to get appear on your blog

    ReplyDelete
  8. if my fb page link is this then what to change https://www.facebook.com/pages/Movies-in-HD/159857324025288

    ReplyDelete
  9. Go here to register yor fb page username without 25 likes and then try :- http://1vikash.blogspot.com/2012/04/easy-register-your-facebook-page.html

    ReplyDelete
  10. its not working for me.
    what should i place for my fb url
    http://www.facebook.com/pages/Ncooltips/362303803781053

    ReplyDelete
  11. @Manohar Rao frist you go http://1vikash.blogspot.com/2012/04/easy-register-your-facebook-page.html and follow to register username for your page and then try..

    ReplyDelete
  12. Got it. Thanks.
    I still find some problem in IE. the popup is not shown, instead my entire page is covered with the popup layer which is empty.

    Do i need to add any checks in the code. please suggest me.
    It is on www.ncooltips.com

    ReplyDelete
  13. got this error when i tried in IE.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
    Timestamp: Mon, 30 Jul 2012 19:54:48 UTC


    Message: Object doesn't support this property or method
    Line: 16
    Char: 76364
    Code: 0
    URI: http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

    ReplyDelete
  14. How can i remove it, i notice its increasing bounce rate on ma blog

    ReplyDelete
  15. @DAAYUR YOU JUST REMOVE THE ADDED WIDGET ,ALL DONE

    ReplyDelete
  16. AND SONAM WHAT IS YOUR BLOG URL ..OR GIVE ME YOUR TEMPLATE AT vc8257@gmail.com

    ReplyDelete
  17. My fb url is >>> www.facebook.com/androidusercommunity

    So what i have to put there ????? is there is any need to put "=" sign ???

    ReplyDelete
  18. Bro I Liked This post it worked for me.
    I Liked Your website template and want to have one same please give me the link or comment back on this

    ReplyDelete
  19. Thanks kenul ..
    and sorry this template is Fully Edited my myself not downloaded..so download link is not available to download

    ReplyDelete
  20. great work. http://pakeset4u.blogspot.com/

    ReplyDelete
  21. Nice article! Thank you for sharing this wonderful article. Keep posting......

    You can also visit my blog Computer Easy Solutions

    ReplyDelete
    Replies
    1. thanks Md. Monirul Islam you are most welcome.. :)

      Delete

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks