Thursday, 21 February 2013

How To Add Pop Up Facebook Like Box In Blog Or Website?

This widget contain the Facebook like box as new user enter on your website or blog. This plugin can be added to blogger blogs or your website.  It will help you increase your Facebook Fans greatly.
This popup appears only once to every new visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every page view. 
STEPS TO ADD IN BLOG
  • Open your www.blogger.com.
  • Login in your desired blog.
  • Go to Layout.
  • Click to "Add Widget" where you want to add it.
  • Now click on "HTML/JAVASCRIPT" widget.
  • Now copy the below code and paste it to there.
  • Leave the tittle empty.
  • Click save. now you are done.
STEPS TO ADD IN WEBSITE
  • Just go to your HTML file.
  • Now copy the below code and paste it between the <body>....</body> tag.
  • Save it now you are done
<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,#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/AVvXsEg_K1iWbh9emNGN1kczN3wAliitu_78CSwSR7fTH6paANSshLQIGUduJrKatYAMWA-og4nygkBQ16GRZwJswXaYHsG5zv5vxF8aeexWVuOoq2TnSBWtw8EXCv7qAnk-p2mpG_EEVDQ6oto/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSjCV2T5fpNl4FDP10Svsi_Dbq7pBeAGvLu4KymFgbf0Kud5-tAcpSEp3Z9VKG5v0lnxlwYcCrAg0OfIQgYbD55Iu30QIPLF0zOv5Ur1hLjDb8ge0t4gS04WrVcrWV08JRe8dsi-6Tlg/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_K1iWbh9emNGN1kczN3wAliitu_78CSwSR7fTH6paANSshLQIGUduJrKatYAMWA-og4nygkBQ16GRZwJswXaYHsG5zv5vxF8aeexWVuOoq2TnSBWtw8EXCv7qAnk-p2mpG_EEVDQ6oto/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_K1iWbh9emNGN1kczN3wAliitu_78CSwSR7fTH6paANSshLQIGUduJrKatYAMWA-og4nygkBQ16GRZwJswXaYHsG5zv5vxF8aeexWVuOoq2TnSBWtw8EXCv7qAnk-p2mpG_EEVDQ6oto/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSjCV2T5fpNl4FDP10Svsi_Dbq7pBeAGvLu4KymFgbf0Kud5-tAcpSEp3Z9VKG5v0lnxlwYcCrAg0OfIQgYbD55Iu30QIPLF0zOv5Ur1hLjDb8ge0t4gS04WrVcrWV08JRe8dsi-6Tlg/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_K1iWbh9emNGN1kczN3wAliitu_78CSwSR7fTH6paANSshLQIGUduJrKatYAMWA-og4nygkBQ16GRZwJswXaYHsG5zv5vxF8aeexWVuOoq2TnSBWtw8EXCv7qAnk-p2mpG_EEVDQ6oto/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_K1iWbh9emNGN1kczN3wAliitu_78CSwSR7fTH6paANSshLQIGUduJrKatYAMWA-og4nygkBQ16GRZwJswXaYHsG5zv5vxF8aeexWVuOoq2TnSBWtw8EXCv7qAnk-p2mpG_EEVDQ6oto/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_K1iWbh9emNGN1kczN3wAliitu_78CSwSR7fTH6paANSshLQIGUduJrKatYAMWA-og4nygkBQ16GRZwJswXaYHsG5zv5vxF8aeexWVuOoq2TnSBWtw8EXCv7qAnk-p2mpG_EEVDQ6oto/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/AVvXsEiHdoNgCrkxowHveL1x5VbOOLjjXM23ygGO-mtVlmHfF1JgyhWnPr_RY8g1YQK3N-EH145zW_9btUfnlREDm9-8qFtBmL3qyfITk1xonZRKaKyRE9JWMQdJ88BLunJmSveuyTGGtSHzyLs/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3EAnZTecP_kxL2hfuARl2N2Qmh9CAmvdASDj3Bem02Q9xheqLM_RSqdOTPt1P_F6K34Ose8EDf1ljaoQPm10uwcIpdVgoQsvHFy5EsH8KYbZYDFF8-GwX8SVrMWtsZ9jciffQk1Nrmo/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/AVvXsEg_K1iWbh9emNGN1kczN3wAliitu_78CSwSR7fTH6paANSshLQIGUduJrKatYAMWA-og4nygkBQ16GRZwJswXaYHsG5zv5vxF8aeexWVuOoq2TnSBWtw8EXCv7qAnk-p2mpG_EEVDQ6oto/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>

</center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FXTREMEHOW%2F343381562356765&amp;width=250&amp;height=360&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:280px;" allowtransparency="true"></iframe></center></div></div>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.xtremehow.blogspot.com">Xtremehow</a></p>

CUSTOMIZATION

  • Replace XTREMEHOW with your Facebook username.
  • If you want to show the widget on every load of the page just set "true" to "false".
  • This widget will again pop up your after 30 days, when you visit again on site, if want to change the day just change 30 day to desired by you.
  • Save and done.

5 comments:

  1. At this time I am going to do my breakfast, once having my breakfast coming again to read more news.


    Look into my web blog barcode rentals

    ReplyDelete
  2. I was very happy to find this web site. I need to to thank you for ones time for this particularly wonderful read!
    ! I definitely loved every bit of it and I have you bookmarked to see new things in your
    site.

    Feel free to surf to my web-site; Grow Taller 4 Idiots Review

    ReplyDelete
  3. Excellent article! We are linking to this particularly great content on our
    website. Keep up the good writing.

    Have a look at my blog post - LP 2824

    ReplyDelete
  4. I'm amazed, I must say. Seldom do I come across a blog that's both educative
    and interesting, and without a doubt, you have hit the nail on
    the head. The issue is an issue that not enough folks are speaking intelligently
    about. I'm very happy I found this in my hunt for something regarding this.

    Also visit my web page rent scanner

    ReplyDelete
  5. Hello There. I discovered your blog using msn.
    That is a really neatly written article. I'll make sure to bookmark it and come back to learn extra of your helpful information. Thank you for the post. I'll
    certainly comeback.

    Feel free to surf to my webpage ... bar code printers

    ReplyDelete

Give your feedback here......

Related Posts Plugin for WordPress, Blogger...