Facebook tutorial for Traffic and SEO

Facebook is leading social networking site.Website owners should use Facebook for website to market their website.Different social plugins offered by Facebook can be used for this purpose.These social plugins help visitors share your content on this social networking site.

The shared content has the potential to go viral.The viral content will bring traffic to your site.You also have a chance to convert visitors into regular readers or fans of your website using one of plugins.So broadly Facebook for website can be used to

Why use Facebook for website?

  • Share your content on this social network site.Thus helping your content go viral.Social life is necessary for new websites as well as established ones.Like button falls in this category.
  • Comment on your content and share the comment along with content URL on Facebook.This helps increased communication and exposure to your content and you as well.Comment box falls in this category.
  • Retain your website visitors and inform them about new content on your website.Remember Feedburner email subscription and other marketing tools out there.This can be taken care of using Like box.You need to create Facebook page for your website to use this plugin.
  • Make stronger bond with visitors and potential customers by using follow button.This need revealing your Facebook profile to visitors.If you are using personal account for this purpose than I would suggest not to use this.You should create a professional account with minimal personal information (just professional information) and use this wonderful widget.

Plugins offered by Facebook for website

Adding Facebook social plugins to your website is a must.Below is the list of major Facebook social plugins along with their features in short.

  • Facebook like button — enables users to share your post to their timeline.
  • Facebook like box — You will have to create a Facebook page to use this plugin.This box enables visitors to like your page.So any update made on page is reflected on liker’s timeline.A large number of likes is indication of good brand.
  • Facebook comment box — It enables visitors to leave comment on your post.The comment along with post is displayed in commentator timeline.You can reply to the comments and communication can continue over Facebook as part of your website).It increases reach of your website.
  • Facebook follow button — Visitors can get your updates without becoming your friend.This is indeed a good feature but can reveal your profile details.So if you do not like to reveal your profile to visitors do not use this.

Facebook shares,Facebook likes and Facebook comments are considered one of the top social signal ranking factors combined according to this post on seomoz. Social signals will play an important role in search ranking in future.This makes it extremely important to use Facebook for website.

I am presenting step by step guide to implement above social plugins on your website.The guide below covers all details required to place above plugins.it also covers how to measure performance of each widget on your site.It also mentions fastest way to place these codes on your website.

Step 1: Create Facebook App for website

You should ideally create a Facebook app before placing social plugins from Facebook for website.Creating an app allows you to create multiple moderators for comments made using comment box.

facebook create new app

Creating Facebook app is not difficult.To create an app follow below steps

  • log into your Facebook account and then click this link.
  • Click on Create New App to create new app.
  • On the pop up window just enter a unique app name and click continue.
  • Solve a simple captcha on next screen.

Next click on edit app settings and enter details as mentioned below

Enter below app details
Under Settings Basic

  • Display Name:         your app name
  • Contact Email:         your email id
  • App Domains:          your domain name
  • Sandbox Mode:        off
  • Website with Facebook Login   your domain name

Under Permissions 

  • Default Activity Privacy — None or anything you like
  • Auth Token Parameter: — any of them

Under Advanced 

  • App Type:                     Web
  • Social Discovery       :Enabled
  • Install Insights             :Enabled
  • Mobile SDK Insights:Enabled

Step 2: Enable Facebook insights for website

Facebook insights gives you detailed idea about Facebook plugins performance on your website.Facebook plugins like Like button,Social share plugin and Facebook comment box.It also gives idea of referral traffic back to your website as a result of Facebook likes,Facebook shares and Facebook comments.

Enabling Facebook insights for your website is recommended.To enable Facebook insights for your website follow below steps

facebook insights

  • Go to insights center using this link
  • Click on Insights for your website
  • Select App in the box shown below.
  • A meta tag will be generated.

This meta tag should be added between <head> and </head> tag of your web page.On CMS like WordPress Open header.php file of your theme.Search for <title> tag in the file.Add this meta tag just after the title tag. For other CMS make the changes according to your CMS. Save the file. This small step will activate insights for your website.

Step 3: Create Facebook social plugins code for website


While creating the code using above URL it is good to log into your Facebook account.This lets you select the app id to be used in JavaScript SDK code.Select the app id (This script uses the app ID of your app: option).Copy the SDk code (the code at top as shown in below picture).

This code should be copied once as it remains same for all the plugins mentioned above.Copy Place the code for your plugin wherever you want the plugin to appear on your page part of the generated code for all plugins you want to place on your website.

Note: You can use Facebook like button in place of Facebook like box to get likes for your Facebook page.I have used this feature successfully on this site.It helps me eliminate extra requests needed to display Like box.You just need to mention your Facebook page URL while creating like button code to use this feature.Like box is a heavy plugin.Addition requests are made to fetch picture of you page fans and also the plugin.

Step 4: Facebook Javascript SDK code customization

Instead of using default code generated by code configuration I will be using optimized code.The optimal way to put JavaScript SDK code is asynchronously or using iframe. I will be using code shared on this post.

Below is the SDK code

<div id="fb-root"></div>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
  FB.init({xfbml: true,appId: 000000000000, status: false});

You will have to replace 0000000000 with app-id of yours.To get app id of your application you can use the JavaScript code created in step three above.You will see app id value in that code.In case you have any trouble then use this alternate method.Go to Apps page using this link and select the app you want to use.You will see App id/API key.Copy the App id and paste it in place of 0000000.

Step5: Facebook comment box code customization for website

Remember in step3 while creating Facebook comment box code nothing was mentioned in URL field.This need to be set now.The URL field should contain URL of page on which Facebook comment box is placed.You can not make it static or fixed if you are planning to use on multiple pages or using content management system like WordPress.

Now if you are using WordPress then make below changes to your Facebook comment box code

Generated code (your code may contain different values for data-width and data-num-posts) depending upon your settings while creating the code.

original code
<div class=”fb-comments” data-width=”470″ data-num-posts=”10″></div>

Modified code
<div class=”fb-comments” data-href=<?php echo get_permalink(); ?> data-width=”470″ data-num-posts=”10″></div>

The only change made is data-href=<?php echo get_permalink(); ?>.note for users of other CMS you need to use something to get current URL.Most the CMS will have a function for this purpose.Just paste the function here in place of get_permalink() and you are good to go.

Step 6: Adding plugins to your website

You need to add below components on your website

  • App id meta tag — This need to be added between <head> tag and <head> tag of your website.For WordPress this tag is present in header.php file of your theme.
  • Adding JavaScript SDK — This need to be added before <body> tag of your website.For WordPress this tag is present in footer.php file of your theme.
  • Adding Facebook comment box — This needs to be added in file rendering your comment box currently.You can either replace the code generating comment box using Facebook code or add in addition to it.It is good idea to use Facebook comment along with native commenting system.For WordPress comments.php file is used to display comment box.You need to search for search_form and add Facebook code before it.If you add code before it then Facebook comment box will be displayed before native comment form.If you add code after it then Facebook comment box will be displayed after native comment form.
  • Adding other widgets — You will have to modify code or use widgets of your content management system to place these widgets.


Adding Facebook widgets to your website is beneficial.It does impact your page load times.But the pros are far greater than the cons.The referral traffic and impact on SEO of Facebook activities is great boost for your website.

Feel free to share this post with your friends and post your queries.

14 thoughts on “Facebook tutorial for Traffic and SEO

  1. Good look. (My arithmetic is poor. I get captcha error.)

    • Ah…you got to be kidding right..it is simple maths..but if is not user friendly then I have to look for alternative of it

  2. Very great post. I just stumbled upon your weblog and wished to mention that I have really enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I am hoping you write once more soon!

    • Thanks for your kind words

  3. Thanks for giving lot’s of information regards to exam. Sir/Mam could u plz provide me few samples in my email as my computer is nt working nd m using it throw mobile. 🙂 please it’s my request . Samples of math and computer.

  4. hi esha,
    Nice Post but i could not find the create FB apps. i am using digg-digg plugin is it sufficient for driving traffic using FB. pls help me in this regard. thanks

    • Yes but creating Facebook App help you to get insight about Facebook social plugins on your website

  5. Virtual Assistant

    very nice post liked reading it got very effective information thanks for sharing details

  6. Facebook like box is very useful widget for websites. When i use that widget it has increased my no of fans dramatically.

    • Thanks for sharing your experience

  7. I went through your site and it is very informative. I am looking for someone to do seo friendly content writing for my website. I feel you got great ability of writing website content which are search engine friendly. Please update me. You can visit my website as and leave reply for me.

    • Thanks for offering but I have lack of time

  8. I think Facebook can be used as a source of good traffic and also leads. Actually, a formulation of strategy is required otherwise those widgets will not beget wonders.

    • Thanks for sharing the info

Leave a Comment