I Will be not wrong if I say you already use facebook like box for your facebook page at your website/blog. But they don’t have any kind of effect they just live at your website/blog like a simple widget, Basically it uses JQuery effect for sliding.
Add Floating LikeBox To Wordpress
In the demo you can see an image that float one the left side of the page when you put your mouse pointer on that image the image slide having a facebook like box with a cool style, follow the steps below and see how you can grab this for your wordpress blog.
HOW IT WORK
Login to your Wordpress Dashboard.
Navigate to Appearance > Widgets
Drag and drop a Text (Arbitrary text or HTML ) widget to the sidebar
Paste the following code inside it, if your facebook page URL is look like “http://www.facebook.com/pages/Naija-Career-Portal/235825516464798” then use this code
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIy66MAotYDS-hwMe8FqNe124NkkKmsAxnPP17mIYfvYnYt-lK6GhwXe0LHRVG8IMTqCzdX2Pqr6_0LuWujr4s-KLcFQs1cISBcQXmW8nk9em9cfRQ2FeZuycYbejcUsuoQlbV6vcWw72/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Naija-Career-Portal/235825516464798&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://delgeek.blogspot.com/2011/12/adding-floating-sharing-buttons.html">Delgeek</a></span></div></div>
Replace "http://www.facebook.com/pages/Naija-Career-Portal/235825516464798" with you page username. In case your facebook Page URL looks like
Then better create a Facebook Username in 5 seconds by visiting this Link
Save your widget.
Next In your theme options > Go to Head Code.
If your theme does not support any head code section you can get it by simply Installing a plugin with a name "Header and Footer" by "Satollo"
Paste the code below in the head code box
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Add Floating LikeBox To Wordpress
In the demo you can see an image that float one the left side of the page when you put your mouse pointer on that image the image slide having a facebook like box with a cool style, follow the steps below and see how you can grab this for your wordpress blog.
HOW IT WORK
Login to your Wordpress Dashboard.
Navigate to Appearance > Widgets
Drag and drop a Text (Arbitrary text or HTML ) widget to the sidebar
Paste the following code inside it, if your facebook page URL is look like “http://www.facebook.com/pages/Naija-Career-Portal/235825516464798” then use this code
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIy66MAotYDS-hwMe8FqNe124NkkKmsAxnPP17mIYfvYnYt-lK6GhwXe0LHRVG8IMTqCzdX2Pqr6_0LuWujr4s-KLcFQs1cISBcQXmW8nk9em9cfRQ2FeZuycYbejcUsuoQlbV6vcWw72/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Naija-Career-Portal/235825516464798&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://delgeek.blogspot.com/2011/12/adding-floating-sharing-buttons.html">Delgeek</a></span></div></div>
Replace "http://www.facebook.com/pages/Naija-Career-Portal/235825516464798" with you page username. In case your facebook Page URL looks like
Then better create a Facebook Username in 5 seconds by visiting this Link
Save your widget.
Next In your theme options > Go to Head Code.
If your theme does not support any head code section you can get it by simply Installing a plugin with a name "Header and Footer" by "Satollo"
Paste the code below in the head code box
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Click Save.
Visit your blog to see it working, Hope you enjoy the post
No comments:
Post a Comment