Thursday, July 28, 2011

How To Install Facebook Like Button

One of the best ways to achieve high quality traffic to your website is through word of mouth. In digital world this can be achieved through social networking websites. Today, Facebook is ranking the highest among social networks. Using Facebook you can share website links to your friends and they can share to their friends, etc - chain reaction effect.

How to install Facebook like button on your page? Follow the steps below.

Step 1: Modify your opening HTML tag to add facebook extensible application markup language.

< html
I placed a space before html tag because blogspot won't allow me to use this tag inside the post.

Step 2: Add additional meta tags which facebook will use to scrape your page for content and give brief information about the link.

< meta property="og:title" content=""/>
< meta property="og:type" content=""/>
< meta property="og:url" content=""/>
< meta property="og:image" content=""/>
< meta property="og:site_name" content=""/>
< meta property="og:description" content=""/>
< meta property="fb:admins" content=""/> 

og:title - This is the main title of your page. Samething you place in your head->title tag.
og:type - This is the type of content you have on your page.
og:url - This is a full URL to get to this page.
og:image - Full path to image file on your website.
og:site_name - You can place a short name of your website. (ex. pc-technic)
og:description - Place a brief description of the page here. You can use the same description as in standard meta tag description.
fb:admins - Here using coma you have to specify administrators in facebook of this content. You can place your facebook ID here. Multiple IDs is allowed.

You can read more about these tags here: Open Graph Types

Step 3: Once you placed all proper meta tags on your page you can test them using this facebook tool which will generate your iframe code to place facebook like button.

If you did everything correctly, facebook tool will generate a small script like this one:
< iframe src="" scrolling="no" frameborder="0" 
style="height: 62px; width: 100%" allowTransparency="true">

That's it. Make sure to populate your content tags with correct information and you're good to go. Let me know if this example works for you.


No comments:

Post a Comment