10
Tags:
Facebook,
Wordpress
2 awesome ways to add a facebook like box to your wordpress blog
Posted by
Anonymous on 1/08/2012
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
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
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:
You can see this on my blog too.
Here is the image
Or see the live demo at my site itself
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&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>
</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
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!
Subscribe to:
Post Comments (Atom)





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..
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. :)
Thanks a lot Yong Kwasny :) plz keep commenting and keep visiting our blog :)
i’d love to share this posting with the readers on my site. thanks for sharing!
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.
Sure man and all the best keep visiting and commenting :)
Sure as I said already I love sharing!! and thanks for the comment
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.
thanks
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