How to put facebook popup like button in blogger

Learn how to add facebook popup like box to your blogger or website. you can made it easy with the following steps.


This post will explain you about how to add facebook popup like box in our blog. This procedure is suitable with some template only not for all the template designs.  The fact is, its not working for my template too. but its suitable for travel template designs (In Case if your a blogger account holder you can find Travel template designs in your Dashboard).

the below steps will explain you the procedures to add the code to your template code. First step is to signup your account

1. Go to your Blogger Dashboard>> select the Template menu in side bar >> click on the  Edit Html
2. Find following code in your template.

</head>
3. and paste the following code before closing head tag. ( Before this tag  </head>  )

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document).ready(function(){ 
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) { 
var setDays = 1000*60*60*24*7; 
var expires = new Date((new Date()).valueOf() + setDays); 
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString(); 
$.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;}); 
}});</script>

in this code see the sixth line you can notice *7 at last.  Setting this value will effect cookie refreshment. I have set the likebox to appear once to the visitor and likebox will appear again after 1 week. If you want to display likebox to your visitors after a 1 day then set 7 to 1.  if you set 7 to 1 then its irritate to the regular user. so try to avoid this.
4. Now Search for </b:skin>.  Click the black arrow to expand the code.


5.  and paste following css code before above </b:skin>
/* 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; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aEw5i02Zmfn8nZ8eoM2kFtgef_LUeR0lHgH6M9Bd8yq64ELK6h2_w33R3Q-_Awj8g30d7CbLaTZ6uiAhNV_E4fn8aG5bSrsf36l-fr4__G79pwnn7ge-_KGwDyJlllitWh09i7Ua2rM/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAF_aSZmKT_lvj86fevtpoBlUG4X5MA3vsO9nN-eYbLtWzwf_zwjsRVf0GhICpRn-tQS8T9Sn82tUBILtk8Ruk7QuNiv9nLqb2D_idIi3S8g__Fx0U2LhGWH-W6DSXDW9qKAGmnzk2rS8/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

6. Save your template and you are done second last step! Visit your blog to see it working just perfectly.
7. Now finally find following code.

</body>

8. and paste the following code before closing </body> tag.

<div style='display:none'> 
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'> 
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3> 
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTechmarketworld&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/> 
  </div> 
  </div> 
    </div>

Replace  Techmarketworld  with your facebook fan page username.
save your template and you are all done. .!!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again.
I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong facebook fan growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.

Labels: , , , ,