Automatically posting a blog post to Facebook used to be a challenge. The idea was simple, which is to notify Facebook that you have a blog you want posted on your wall, and the social media will do as you command. The implementation, however, was more complicated than that.

Even with Facebook's post-by-email feature, only the blog name and title will appear on the wall, leaving behind the content or link. There are other plugins available, but they don't work as straightforward as they're supposed to be. There is always something missing.

How to Share Blogger post automatically to Facebook using IFTTT

Here is an online utility IFTTT (If This, Then That), which is capable of moving social postings between sites. Setting it up is fairly easy, and just as easy to use. So, let's see how we can share Blogger posts automatically to Facebook using IFTTT.

Step 1. Sign up for a free IFTTT account

Visit IFTTT.com and set up an account by creating a username and password.

Now, IFTTT will take you through a mini-tutorial - click on the word 'this', 'that' and 'Continue' button several times. Finally, select 3 channels that interest you and click 'Continue' to finish with the registration.

Step 2. Create a new recipe

Once registered, we need to 'Create a Recipe'. A recipe is basically the process of combining two platforms together - in our case, we will combine Blogger with Facebook. This shouldn't take more than five minutes.

To get started, click the 'My Recipes' link and then click the 'Create a Recipe' button, as shown below:

Start creating the recipe by clicking the blue 'this' word and select a "trigger channel". The trigger you need to choose is Blogger - search for it in the box, as illustrated below:

Step 3. Connect Blogger blog with IFTTT

Connect your Blogger account in order to tie it with your IFTTT account. A 'Request for Permission' pop-up will appear > click the 'Allow' button and choose which blog you want to use with IFTTT from the drop-down menu, then click the 'Update' button.

After our Blogger blog has been connected, 'Choose a Trigger' that allows you to specify what kind of posts will be published to Facebook. You can choose 'Any new post' or 'New posts labeled'.

Finally, press the blue 'Create Trigger' button to proceed to the next step.

Step 4. Creating the 'That' trigger

After registration, Create a Recipe that will specify the direction with which your blog posting will take. Since you want to link Blogger to Facebook, then the Recipe will be - if Blogger, then Facebook. What you're doing is replacing 'this' to Blogger, which is the source, and 'that' to Facebook, which is the target destination.

To set up 'that', click on the blue-colored 'that'. This will bring up a window that contains a list of social media sites. Search for 'Facebook' in the box and select the 'Facebook Pages' option (select the plain 'Facebook' option if you want to post to your personal profile).

Step 5. Connect Facebook page with IFTTT

Connect your Facebook account. Make sure you are logged into your Facebook account, before you connect. Pressing the 'Connect' button will open a pop-up window to allow IFTTT post on your Facebook page, then select your Facebook page.

Hit the 'Done' and 'Continue to the next step' buttons and we're almost done...

You will be prompted to 'Choose an Action', where you get to specify if you only want to 'Create a status message', 'Create a link post', or 'Update a photo from URL'. Choose 'Create a link post' as shown below:

Step 6. Choosing the ingredients

Once you choose an action, a 'Complete Action Fields' window will appear with 'Link URL' and 'Message' box. To add an ingredient, click on the 'Message' field and you'll see a test tube icon on the right hand side. If you click it, a drop-down menu will appear which will let you choose a field to include - select 'PostTitle' and click 'Add Ingredient' blue button on the right side.

If you are unsure of what each ingredient does, please visit this page.

Step 7. Finish creating the recipe

Finally, click the blue 'Create Action' button and your recipe should look something like this:

To complete your recipe, hit the 'Create Recipe' button.

And that's it! This is how IFTTT recipes are created. Next time you publish a Blogger post, it will be automatically shared to Facebook.

Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.

In order to produce an effective digital campaign, you absolutely must take advantage of social media by doing things like integrating Facebook on Blogger. Email marketing can be useful, but it comes with restrictions that could limit your blog's potential. Perhaps the most significant problem is that emails don't come with a face or personality like Facebook does.

Think of a time when you received an email in you inbox from someone you didn't know. Where you inclined to open it or did you send it right to the junk folder? If it's your first introduction to new consumer, they simply don't know who you are, what you want, and how you got their email. This sets off an initial breakdown of any type of trust that might have developed. The reputation of email marketing is further deteriorated with a study done by Kaspersky Lab, an Internet research firm. They estimate that around 70% of all the emails sent in the world are spam.

Sharing site content using a Facebook Like Box is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. Adding a Facebook Like Box to your site helps to reduces your individual workload, and instead distributes that ability equally among your readers.

When someone reads your content and appreciates the kind of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a 'Like Box' to your Blogger site so that you can began taking advantage of these great opportunities.

Click here for a DEMO

How to Add the Facebook Popup Like Box Widget

1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side.
2. Once the popup window is open, select the HTML/JavaScript gadget from the list:

3. Copy and paste the following code inside the empty box:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Helplogger/120574614736021&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">Helplogger</a></div>
</div>
</div>

4. Press the 'Save' button to add the widget to your blog. That's it!

Facebook Popup Like Box Customization

After adding the code, replace the address in blue https://www.facebook.com/pages/Helplogger/120574614736021 with your site's facebook page URL.

The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:

.delay(5000)

By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:

</body>

Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:

<b:if cond='data:page.type == "index"'>ADD THE FACEBOOK WIDGET CODE HERE </b:if>

After saving this widget, you can test it out by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's Facebook page.

If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.

It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to our blog or site and boost sharing stats is to add social sharing buttons.

In this tutorial we will see how to add a floating social media sharing bar below the title of Blogger posts, so when a reader scrolls down the page, he will still be able to see the sharing buttons without having to scroll back to the top.

Adding the below jQuery script will make the buttons float in a fixed position as soon as they reach "the top" of the page. By scrolling back, the buttons will return to their initial position. The social sharing bar includes buttons for Facebook, Twitter, Google+, and Pinterest.

Social Media Sharing Buttons below Blogger Post Title

1. From the Blogger Dashboard, go to "Template" and click on the "Edit HTML" button:
   
   
   
2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Once you see the search box, type the </head> tag inside the search box and hit Enter to find it.
   
   
   
3. Just above </head> add this script:
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   $(function() {
   var $movesbuttons = $("#floating-social-buttons"),
   $window = $(window),
   offset = $movesbuttons.offset();
   $window.scroll(function() {
   if ($window.scrollTop() > offset.top) {
   $movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
   } else {
   $movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
   }
   });
   });
   //]]>
   </script>

4. Now before the ]]></b:skin> tag (press CTRL + F to find it) add the following CSS styles:
   

   #floating-social-buttons {
   padding: 6px 0px 12px;
   position: absolute;
   background: #F6F6F6;
   border-bottom: 1px solid #DEDEDE;
   width: 550px;
   height: 18px;
   z-index: 99;
   }
   .floating-social-buttons {
   margin-left: 5px !important;
   }
   .floating-social-buttons li {
   float: left;
   margin-left: 5px;
   list-style:none;
   }

   To change the width of the bar, modify the 550px values in red. Note that this value also appears in the script which also needs to be modified
5. Finally, just below the second <div class='post-header'> (press CTRL + F and hit Enter twice to find the second one) add the following code:
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div style='padding:5px 0 35px 0;clear:both;'>
   <div id='floating-social-buttons'>
   <ul class='floating-social-buttons'>
   
   <li><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;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>
   
   <li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>
   
   <li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>
   
   <li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>
   
   </ul>
   </div>
   </div>
   </b:if>

6. Click on the "Save template" button and you're done :)

Customizing the Floating Social Media Sharing buttons

• If you want the buttons to appear at the end of the post, paste this code before or after <div class='post-footer'>
• If the bar overlaps with the post content, then change 35px to a higher value.

So these were the steps for adding the horizontal social buttons bar on Blogger. Using this bar it is also useful as it could help you to get more social traffic for your blog.

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.

You can see a demo in this test blog.

Adding Social Media Icons to Blogger Header

Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:

Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:

 /* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Screenshot 1:

Screenshot 2:

Step 3. Now search for this line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 4. And just above it, add this code:

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZO4YyH2eTaXLC7ttlSakpYhleKI3FmlzKue7m-MtwFWkUZojmKs-8bmFC6PgDBY65H7CvM4VjAJVA2UmXtAaHQTLrAwgGdqsL7eSnk3nB9DxmE-c5t4G8UpYVBgQIPnRSBUFJDtlXJk/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBvtR2PaPYFzLg1Go02ah4gjbU0aYUEYbrOlmFvmFsyjqH7TS1eK8Wz1e0PLbGGYF_J2gOHbaTtVQ3rT5TAFMnzYc2UfTuU6hXcU8jaQ0mgUgpqU9ShDcKsiaTxrHRld5KdtEpKrP0vbA/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO20ezyDMULlDloAsCEyjf6se3f-D7qVY6zbvaoXSWWRxIHgs62nkKkn45sMIMce2Camk8-WpLblT_x9RGlIUpnQQc2em0B2HEgNPfKKsM1NiR-8nI9urB0tIIj-dNzKMnvCtGzSaL_Xg/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME5j3P7iw92aWxx0DxtjQ6hC8ZqaqzgSgd80EiIkBs7St9PrSKLRhvD2cFqunpfJ_dNDeRtmiLc1W-5FE5FMyf3PvhfQPDP05yMWe5D1iJVZVe_tCX6yfNvX0JzsPcqYMa_ZzIfJ4FqI/s1600/RSS.png'/></a></li>

</ul></div>

Customization

- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5. Finally, Save the Template to apply the changes.
The effect is done with CSS3, so this effect will not work in older browsers.

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 on the right side of this blog:

Demo blog

Adding Static Facebook Like widget on Blogger

Step 1. Log in to your Blogger account, go to "Template" and hit the "Edit HTML" button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

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

</head>

Step 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>

Step 5. Save the Template.

Step 6. Go to Layout > Add a new Gadget > select the 'HTML/JavaScript' gadget and paste the code below in the HTML box:

<style type="text/css">
#fbplikebox {
    display: block;
    padding: 0;
    z-index: 99999;
    position: fixed;
    background: #ffffff;
}

.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/AVvXsEieo9QSOtjITEkydA4cpIG8XzhbYD5m5TZLRw2vAVMeqiTBmhPAaG0v1XuKIt6EH5aG_H5XVWZZDPLWoIqQUdPsVFwWl84nSbwHpw0zFYsX7p8CUfLz4oSwi11sHyOefsSir2gpKwmR6xA/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;" allowtransparency="true"></iframe>
</div>

Step 7. Replace YOUR-FACEBOOK-PAGE text with your Facebook fan page URL. Then, you will need to replace the following characters in the URL, as follows:

The  :  symbol with:

%3A

The  /  symbol with:

%2F

For example, the Facebook fan page of this blog is:

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

After replacing the above symbols, the Facebook fan page would look like this:

http%3A%2F%2Fwww.facebook.com%2Fpages%2FHelplogger%2F120574614736021

Other settings (optional):
- to change background color of the fan box, replace the #ffffff value in red. You can pick the favorite color using this Color Code Generator.
- to change the Facebook badge color, replace the #3B5998 color value with your own.
- to change the width and height of the Facebook box, change the values in red (250)

Step 8. Now you can save this static Facebook fan box widget - press the 'Save' button. Enjoy!

Credit goes to Harish (way2blogging)

The Facebook Like button will allow visitors to Like your post and share it with their Facebook friends. In this tutorial, we will see how we can add a Like button for each individual Blogger post, and not a Facebook fan box for the entire blog (which is also a good idea to have it in the blog's sidebar). Having a Facebook Like button below your post titles makes easier for Facebook users to like specific posts on your blog, which in turn displays the liked content on their profile (and potentially on their friend's feeds).

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

Step 1. Go to Blogger Dashboard > Template > Edit HTML 

Step 2. Click anywhere inside the code area and search using CTRL + F keys for this tag (hit Enter to find it):

<data:post.body/>

Note: you may find it more than 3 times, stop at the second one (or third one in case it won't show up after applying the code on the next step).

Step 3. Just above it, copy and paste the following iFrame code:

<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>

Step 4. Save your template and you are done adding the Facebook Like button below you Blogger post titles.

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. Once subscribing (by pressing the 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 already done so, please see here How to Create a Facebook Fan Page.

How to Create a Facebook Like Box

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 this screenshot:

2. Next, visit this page: https://developers.facebook.com/docs/plugins/page-plugin

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

Note: If you don't want to display the timeline of your Facebook page, remove the "timeline" text under the "Tabs" section. You can also specify the Width and Height of the Facebook fan box and change other several options such as using a Small Header, hiding Cover Photo and Show Friend's Faces.

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

5. Next, you'll be given two code options: JavaScript SDK and IFRAME. The one we will use for this tutorial is the iFrame code. Select it and copy the code generated in this box as shown in the screenshot below:

Adding the Facebook Fan Box to Blogger

6. Log in to your Blogger account, go to 'Layout' > click on the 'Add a Gadget' link

7. Once the pop-up window appears, scroll down and select the 'HTML/JavaScript' gadget:

8. Paste the iFrame code in the empty HTML box:

9. Click the 'Save' button and you're done adding the Facebook Like or Fan box to Blogger.

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 or 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. To see how a Facebook fan page looks like, please visit our Facebook Fan Page.

How to Create Facebook Fan Page for your blog.

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.
   
   
   
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:
   
   
   
3. Enter your site/blog description and the url address. These infos will appear on your Facebook page. After you have finished, click "Save info".
   
   
   
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 similar to this: http://www.facebook.com/pages/Helplogger/120574614736021

Now, if you have minimum 25 fans, you will be able to shorten your Facebook URL to look like this: http://www.facebook.com/helplogger

For this, go to http://www.facebook.com/username/ and click to set a username for your pages.

There you can select the username for your fan page. Be careful when you choose your Facebook Fan Page Username because you can't change it back afterwards.

Share Your Most Recent Blog Posts to Facebook

Update: Unfortunately, RSS Graffiti is no longer available. Please read this post to see how to automatically share blog posts to Facebook.