Digital Life With "Digital World": facebook like box

Showing posts with label facebook like box. Show all posts

Showing posts with label facebook like box. Show all posts

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&width=250&height=360&colorscheme=light&show_faces=true&border_color&stream=false&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.

Subscribe to: Posts (Atom)