10

2 awesome ways to add a facebook like box to your wordpress blog




Hey guys
Nowadays Facebook plays a vital role in websites with not only techniche.
So the “likes” are the main reputation people think of.
Thus the placement of this like box must be perfect so that you can get more likes :)
Here are 2 perfect ways of placing them
Pop out like pop up domination
You can see this on my blog too.
Here is the image

Or see the live demo at my site itself :P
Here is how to add it
Go to wordpress dashbord click appearance click widgets drag “text(Arbitrary text or HTML)” or  and add the following code:

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdv485POedLI278ylEDaI67YIcMZ8J1wVnFu4WE9BRcvwgDn604UyntlFq1PFJMihDdtFdELCbzUk-YcpOtMLTT8F8Xgbd4PLoUKNZ-SgNIq2J_TBiGWi3IDeofm39tg_StUNxoTJnyOc/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzLAoBaS3lwzj6XEnJpPpeBp0P16bzyPI4J2zbCsrQVCrK_RC5vcQ4TWRn5pmwmcs7If69VczUEGMQ7s7Bv7FmzPT44MmnH3gaeXu1HCnvEKjG2gGgesMm712_CaMP3hmudNNqN1GDDaP/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdv485POedLI278ylEDaI67YIcMZ8J1wVnFu4WE9BRcvwgDn604UyntlFq1PFJMihDdtFdELCbzUk-YcpOtMLTT8F8Xgbd4PLoUKNZ-SgNIq2J_TBiGWi3IDeofm39tg_StUNxoTJnyOc/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdv485POedLI278ylEDaI67YIcMZ8J1wVnFu4WE9BRcvwgDn604UyntlFq1PFJMihDdtFdELCbzUk-YcpOtMLTT8F8Xgbd4PLoUKNZ-SgNIq2J_TBiGWi3IDeofm39tg_StUNxoTJnyOc/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzLAoBaS3lwzj6XEnJpPpeBp0P16bzyPI4J2zbCsrQVCrK_RC5vcQ4TWRn5pmwmcs7If69VczUEGMQ7s7Bv7FmzPT44MmnH3gaeXu1HCnvEKjG2gGgesMm712_CaMP3hmudNNqN1GDDaP/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdv485POedLI278ylEDaI67YIcMZ8J1wVnFu4WE9BRcvwgDn604UyntlFq1PFJMihDdtFdELCbzUk-YcpOtMLTT8F8Xgbd4PLoUKNZ-SgNIq2J_TBiGWi3IDeofm39tg_StUNxoTJnyOc/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdv485POedLI278ylEDaI67YIcMZ8J1wVnFu4WE9BRcvwgDn604UyntlFq1PFJMihDdtFdELCbzUk-YcpOtMLTT8F8Xgbd4PLoUKNZ-SgNIq2J_TBiGWi3IDeofm39tg_StUNxoTJnyOc/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdv485POedLI278ylEDaI67YIcMZ8J1wVnFu4WE9BRcvwgDn604UyntlFq1PFJMihDdtFdELCbzUk-YcpOtMLTT8F8Xgbd4PLoUKNZ-SgNIq2J_TBiGWi3IDeofm39tg_StUNxoTJnyOc/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/AVvXsEj0EER9Nm9PHoB4EqhFQ6zt7biOG3OZLOk8Zvt5UpT67xoeynZL7l44-Qf1IhYI-__YX3IJJ3GLvAWXzhibKq31R0RNCNUIE2mbaGnoC9-1nX4zvTBMgy0bKPRgcm00vdQK2UaGqUIJDWTf/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xjoTQKKDjfi88bh146gU9gaVOykpzaNke2gwHisMbHN6BGL6pOQKq6t6oxPcnRCG9aRgpimH6h0KGW4aLEXXfPsKzW50Edgnr3sb9qUD-JPJN1-VJZd0osaJfAuvH_XSLHf-sOFryn9I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdv485POedLI278ylEDaI67YIcMZ8J1wVnFu4WE9BRcvwgDn604UyntlFq1PFJMihDdtFdELCbzUk-YcpOtMLTT8F8Xgbd4PLoUKNZ-SgNIq2J_TBiGWi3IDeofm39tg_StUNxoTJnyOc/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%2Fbaratworld&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>
</div>
</div>


Change baratworld to your facebook page name
As you can see I have bold the word baratworld replace with your page id and add it :) page id is the number or text that comes after facebook.com in your url bar when you visit your fb page.
Now popup comes in your post :) yipe!!!
2)Adding a jquery slider at your home page
You can see a demo in my site itself the facebook button in the right- middle



























This is very simple to add
go to the following link:here
In that post he mentions to add the script before there is no need to add that in wordpress :)
So I hope you liked the post all the best in your placement


Subscribe To Get FREE Tutorials!

Related Posts Plugin for WordPress, Blogger...


Share your views...

10 Respones to "2 awesome ways to add a facebook like box to your wordpress blog"

I am really inspired together with your writing skills and also with the format on your weblog. Is that this a paid theme or did you modify it yourself? Either way keep up the nice high quality writing, it is uncommon to see a nice blog like this one these days..

Yong Kwasny said...
14 January 2012 at 15:26

I like what you guys are doing. Such intelligent work and reporting! Carry on with the excellent works guys. I have incorporated you guys to my blogroll. I think it will improve the value of my site. :)

Bharadwaj Giridhar(BG007) said...
14 January 2012 at 19:04

Thanks a lot Yong Kwasny :) plz keep commenting and keep visiting our blog :)

Brooklyn said...
15 January 2012 at 06:34

i’d love to share this posting with the readers on my site. thanks for sharing!

Ashley said...
15 January 2012 at 11:33

Hey friend can i publish some paragraph of your article on my little blog of university.I have to publish a good articles out there and i really think your post Fits best into it.I will be grateful to give you an source link as well.I have two blogs one my own and the other which is my college blog.I will publish some part in the university blog.Hope you do not mind.

Bharadwaj Giridhar(BG007) said...
15 January 2012 at 18:15

Sure man and all the best keep visiting and commenting :)

Bharadwaj Giridhar(BG007) said...
15 January 2012 at 18:21

Sure as I said already I love sharing!! and thanks for the comment

Telekinesis said...
24 January 2012 at 03:31

We are a group of volunteers and opening a new scheme in our community. Your website provided us with valuable information to work on. You've done a formidable job and our whole community will be thankful to you.

Bharadwaj Giridhar(BG007) said...
24 January 2012 at 06:06

thanks

Intermediate English said...
24 January 2012 at 16:26

Very good written story. It will be supportive to everyone who utilizes it, as well as myself. Keep doing what you are doing i will definitely read more posts.

Post a Comment

 

© 2011 CoolTricks This content is copyrighted to f10f1111 | Powered by Pro Thesis Theme| Designed by f10f1111