Social media widgets are an easy way to get the audience to know about your blog or website. Many bloggers and webmasters used different widgets as an advertisement or promotion campaign for their blog/sites. Facebook widgets are more likely to be seen than any other social media widgets on every blog or website since Facebook is the largest and one of the best social networking site. Some days ago, i have made posts about other social media widgets like "Floating Sidebar Social Media Widget" and other. Today, i am going to share a widget through which you can engage your audience to follow you on Facebook directly from your blog/site. This widget is so called “SLIDING FACEBOOK LIKE BOX WIDGET”.
To add this useful widget in your blog/site, just follow the steps below:
- Login to your Blogger Dashboard.
- Go to Template.
- Backup your Template. (Click Here To See, How?)
- Now click “EDIT HTML.”
- Press CTRL+F, and search for </head> tag.
- Just before </head> tag, paste the following code:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>Note: Add the above code only, if you haven't apply "javascript" to your blog.
- Now go to “LAYOUT” > “ADD A GADGET”.
- Select “HTML/JAVASCRIPT” from the list and add the following code:
<script type="text/javascript">
$(document).ready (function() { $ (".fblikebox").hover (function() { $(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate ({right: "-250"}, "medium");}, 500);});
</script>
<style type="text/css">
.fblikebox{background: url("http://i1310.photobucket.com/albums/s658/ubaidh/FacebookBadge_zps8026204c.jpg?t=1366893812") 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%;}
.fblikebox div{border:none;position:relative;display:block;}
.fblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.fblikebox span a{color: #808080;text-decoration:none;}
.fblikebox span a:hover{text-decoration:underline;}
</style>
<div class="fblikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftutorialspark9&width=245&colorscheme=light&show_faces=true& connections=12&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>
</div>
</div>
Note: Change “tutorialspark9” in URL, to your own facebook user/page name.
- Click “SAVE”.
That’s it, you are all done. Refresh your blog to see the widget.
- Don't forget to share this post, and if you have any questions, please leave your comments below.
