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>
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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzzyX0YETUuoXhWYRDKP1459bUrP6VbHOdeuQjhsbWsUDtpeYdeczYDGaT1RBRNb687HGpj8-dPLs622_iwljZu9Y40UXxbcnHwGFF8Zh-urKxpY2xShVXEsH5r6_WXyUPux_OWFYX00/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzzyX0YETUuoXhWYRDKP1459bUrP6VbHOdeuQjhsbWsUDtpeYdeczYDGaT1RBRNb687HGpj8-dPLs622_iwljZu9Y40UXxbcnHwGFF8Zh-urKxpY2xShVXEsH5r6_WXyUPux_OWFYX00/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/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/AVvXsEg_NMpIoeLKDoJlmqcUAMfL2RC_Mi3itksJI017sn-SMzFfsmEz1dksU99Q-8abxZkY4ngn2N7kiuF1-8k8tSQWpaGfYr-Apob3vdvLLPrYxB-FuDEZF5VS813XYXJfgcbrDoBD3tSrKuQ/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_jBQ8FAlTf-S_NQawWlU_sMP5qbWz9dPp3oq0uK7mldJKEqVDy1LNiOFC6zKD4I_Up4jmdk9elBeocH5vHAuCtPjbksUJCRrnNpWUVp-PdoostljYhheeJ5nvue4Vdl_L2RWOvcCAM/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&width=300&
colorscheme=light&show_faces=true&border_color=%23ffffff&
stream=false&header=false&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.
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzzyX0YETUuoXhWYRDKP1459bUrP6VbHOdeuQjhsbWsUDtpeYdeczYDGaT1RBRNb687HGpj8-dPLs622_iwljZu9Y40UXxbcnHwGFF8Zh-urKxpY2xShVXEsH5r6_WXyUPux_OWFYX00/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzzyX0YETUuoXhWYRDKP1459bUrP6VbHOdeuQjhsbWsUDtpeYdeczYDGaT1RBRNb687HGpj8-dPLs622_iwljZu9Y40UXxbcnHwGFF8Zh-urKxpY2xShVXEsH5r6_WXyUPux_OWFYX00/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYcHManpy7C40iDWm2ny0Xi0iuYEnhegJOCDgjSWKZctwxTwltYnHgUQceIDF4MHktRM5DWiQmGeSgka7uxYfi-6nniMLYS7Be-x1phzyxiKBr0Hy9bj_YkmG3aIdEaXXulmQBSlVV9g/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/AVvXsEg_NMpIoeLKDoJlmqcUAMfL2RC_Mi3itksJI017sn-SMzFfsmEz1dksU99Q-8abxZkY4ngn2N7kiuF1-8k8tSQWpaGfYr-Apob3vdvLLPrYxB-FuDEZF5VS813XYXJfgcbrDoBD3tSrKuQ/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa_jBQ8FAlTf-S_NQawWlU_sMP5qbWz9dPp3oq0uK7mldJKEqVDy1LNiOFC6zKD4I_Up4jmdk9elBeocH5vHAuCtPjbksUJCRrnNpWUVp-PdoostljYhheeJ5nvue4Vdl_L2RWOvcCAM/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&width=300&
colorscheme=light&show_faces=true&border_color=%23ffffff&
stream=false&header=false&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>
Great! But, this does not work in Blogger's Dynamic templates.
ReplyDeletehttp://www.techscratched.com
you can use any other templates...
Deletegood post. But it is not working in IE.
ReplyDeletecould you please let me know how to solve this.
my blog is www.ncooltips.com
Thanks you very much for the nice post.
This is perfectly working on IE.
DeleteI checked your site.
Good post, but the pop up window cannot be closed !!!! what can i do please???
ReplyDeleteIt has a close button at the bottom right corner.
DeleteThis is what i Was looking for.. Thanks..
ReplyDeleteMy Site: www.androidjobboard.com
i want to do this permanently in my blog nd nt only once... I couldn't find VALUE there ... please help
ReplyDeleteHi.. This is great. Could you please add the part where the window doesnt popup if user has already liked the page? Thank you!
ReplyDelete