Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static facebook badge at the right side of this blog

Adding Static Facebook Like widget on blogger

Just follow the steps:

1. Log in to your Blogger Dashboard, go to Design >> Edit HTML

2. Check the "Expand Widget Templates" box

3. Search (CTRL + F) for this tag:

</head>

4. Add the following code just before/above </head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

5. Save the Template.

6. Now go to Design >> Page Elements >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhguQhGoV24hrHCBuJFyC9k9xfa226LjDvodjL4NhXbCItY5jPW5LpBlySBso75zHgSITfBTBPD6keb1x3XrpXLVxUUc6FpXKfVIXIv0YbQBqO8tEzVc9eAYMOrDKnYf8tEEitfXjA_mYw/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

7. Replace YOUR-FACEBOOK-PAGE text above with the URL of your facebook fan page.
Also replace the : symbol in your URL with %3A and / with %2F

For example, my facebook fan page is:

http://www.facebook.com/pages/Helplogger/120574614736021

After replacing the characters above, your facebook fan page should look like this:
http%3A%2F%2Fwww.facebook.com%2Fpages%2FHelplogger%2F120574614736021

Other settings (optional):
- to change the width and height of the facebook box, change the bolded values (250)
- to change the background color of the facebook fan box, replace #FFFFFF with the hex code of your color (you can choose it from here)
- if you want to change the color of the facebook badge (facebook button) replace this code #3B5998
with your own.

8. Now you can save your widget. Enjoy!

Credit goes to Harish (way2blogging)

Add Facebook Like Button Below Post Titles

This Facebook Like button allow users to Like your post and share it to their Facebook friends. If you want to add the Facebook Like Button below your blogger post title, then follow these steps:

Adding facebook like button below post titles

1. Go To Blogger Dashboard >> Design >> Edit HTML
2. Check the "Expand Widget Templates" Box
3. Search (CTRL + F) for this code:

<data:post.body/>

 
4.  Just above it paste the code below:

<p><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></p>

5.  Save your template and you are done!

For any questions you may have, please leave a comment below

How to add Facebook Like/Fan Box to Blogger

A Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. After subscribing (by pressing like button) , visitors will receive your most recent blog updates on their Facebook page. This box also displays faces of the "likers" on your blog. Before creating a fan box you should already have a facebook fan page. If you haven't yet created, click here to learn how to create a facebook fan page.


Add Facebook Like Box to Blogger


1. Find out your Facebook fan page URL by visiting your Facebook fan page and copy the url in the address bar, you can see how your url should look like in my screenshot:

2. Then visit this page: http://developers.facebook.com/docs/reference/plugins/like-box

3. Paste your url into the Facebook Page URL field as it is shown below:

4. Once you are satisfied with the looks of the Like Box, click on the "Get Code" button

5. You'll be given two codes, titled HTML 5, XFBML and IFRAME. You only need the iframe code.
Select it and copy the code generated for your box as it is shown in the example below:

6. Then go to your Blogger Dashboard >> Design >> Page Elements >> click on the Add a Gadget link >> select HTML/JavaScript and paste the code in the HTML box.

7. Click Save and you're done.

How to create a Facebook Fan Page for your Blog

What is a Facebook Page?

Sometimes referred to as a "Fan Page," a Facebook page is a single page where you can share & talk about any particular subject you want: a celebrity, a blog you find interesting, whatever your heart desires. Think of it as a one-page meeting place, with information, links, a message forum box, RSS and anything else you want.

Want to promote your blog? Then Facebook is one of the best choices when it comes about Social Networking Sites. Here is my Facebook Fan Page.

Make a Facebook Fan Page for your blog.


Step 1. Go to the Create Fan Page Link on Facebook and select Brand or Product

Search for "Website" in the drop down list and provide the Page name (e.g., name of your blog) in the next box. Check the "I agree to Facebook Pages Terms" box, then click on the "Get Started" button.

Step 2. You will be transferred to the next page - here you can "Upload an Image" for your Fan Page or Skip to upload it later. Browse for your image clicking on the "Upload from computer" link:

Step 3. Enter your site/blog description and the url address. These informations will appear on your Facebook page. After you have finished, click "Save info".

Step 4. Now you are transferred to your new Facebook Fan Page. To "Manage" your information, click on the "Manage" Button at top right corner of the page.

Get a Shorter Facebook Fan Page URL

Your Fan Page URL will look something like:
http://www.facebook.com/pages/Helplogger/120574614736021
Now, if you have minimum 25 fans, you the possibility to shorten your facebook URL, to look something like this: http://www.facebook.com/helplogger

To do that, go to http://www.facebook.com/username/ and click on set a username for your pages. There you can select the username for your fan page. And be careful when you choose your Facebook Fan Page Username because afterwards you can't change it back.

Use RSS Graffiti Application to share your most recent blog posts

If you want to automatically add your blog posts to Facebook, then use the RSS Graffiti Application.
Steps:

1. go to http://apps.facebook.com/rssgraffiti/ and authorize RSS Graffiti: click on the "Click here to authorize RSS Graffiti" button.

2. once authorized, you will see a list of your fan pages on the left: click on the Fan Page Name

3. authorize RSS Graffiti to access your fan page: click on "Click to authorize" button.

4. Click on the Add Feed Button, and enter your feed url.

For example, if your blog is http://yourblog.blogspot.com, then your feed URL will be http://yourblog.blogspot.com/rss.xml

Click the link which says "click here to fetch and preview" and see if its grabbing your blog feed. (if it's not grabbing your feed, then check if you have enabled the blog feeds. If your blog is not hosted on blogger, then your feed url will be different.)

5. After you have added your blog feed, go to the Filter Tab and click on the Change link next to the "Cut-off date/time". Choose the latest posts of your blog from the drop down and click on the Save button.

Don't worry if your posts don't appear immediately on your Facebook Fan Page Wall, there might be some delay in the wall getting updated, as RSS Graffiti checks the feed for new entries at regular time intervals.