Floating Facebook LikeBox For Blogs
by: Keith
Does your blog site have a Facebook page yet? Well if it
doesn't then now might be a good time for you to give it one.
First, having a Facebook page (NOT a profile page) obviously
even if it is create a free blog it gets you and your site more exposure, and more exposure means more traffic, and
more traffic means more readers, and more readers... well, you know the drill.
Second, the topic for today involves creating a widget that will link to your
blog site's Facebook page.
This widget will basically rest on the right side of your
page and will slide and extend showing its contents once you hover your mouse
over it (see screenshots below).
So if you’re ready to create your Facebook page, head on
over to this link. Otherwise,
let’s get on with the tutorial:
1.
Starting from your Dashboard, go to Design >
Page Elements (tab).
2.
Click on “Add a Gadget” below the Header.
3.
On the list of the pop window, choose
“HTML/JavaScript”
4.
Paste the following code below inside it:
|
<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/AVvXsEjJGL1nSBZ23JfwXOAvbp4dMIpluyP_9eZOI1f_G4HinZESteQZexuN-huJKy_-33ksqcZiTUczkzT08d_LADs2j8HyE4zovIdMEFNIOKFortscbi8CXIai9MKsf0edX3MRG1SzkMpLaUC8/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%3A%2F%2Ffacebook.com%2FYourFacebookPage&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://www.MyBloggerTricks.com">My Blogger
Tricks</a></span></div></div>
|
5.
Replace the hightlight “YourFacebookPage” with your Facebook page’s custom name.
It’s going to look something like this:
|
http://www.Facebook.com/YourFacebookPage/
|
NOTE: As far
as I know, you won’t have any success if you use a URL which directs to a
profile page; it’ll only show up like this:
Now hold your horses, we’re not
done yet!
6.
Next, head back to Design on your Dashboard and
this time click on the Edit HTML tab.
7.
Look for the <head> tag in the code and
insert this script:
|
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
type='text/javascript'/>
|
8.
Click on either “Preview” or the “Save” button and
see if you got it right.
Thanks to Harish for the widget
code that made this possible.
No comments:
Post a Comment