HOW TO SETUP OPEN GRAPH PROTOCOL FOR FACEBOOK & TWITTER IN BLOGGER





HOW TO SETUP OPEN GRAPH PROTOCOL FOR FACEBBOK & TWITTER IN BLOGGER
Social networking sites are the great source of audience for blogs. Therefore publishers must put some of their attention on the questions like : How social networking sites pickup description of their post while sharing? or Which thumbnail of post will be displayed on sharing? etc.

Social networking such as Facebook, Twitter and Google+ provides the method to control these things up to some extent. They uses the Open Graph Protocol as standard with little variations for site to site. 

Today I will tell you the method to implement OGP (Open Graph Protocol) on blogger blogs for Facebook and Twitter.

Open Graph Protocol Namespace Declaration

First thing, first. Before implementing OGP for Facebook or Twitter, you must add following code to your blogger template. It is the namespace declaration of OGP required for later implementation.

Steps to follow:
1. Sign in your blogger account and go to Template option.

Template option in Blogger

2. Backup your template by clicking on Backup / Restore and then Download Full Template. If something goes wrong while implementation you can use it to reset all changes.
Backup Blogger Template

3. After Backup its time to modify the template. For that click on Edit HTML button.
Edit Html - Blogger Template


 4. This will open your template in a editable container. Click in it and press Ctrl+F. Search
<html


Search <html in Blogger template

5. Now add following code just before the closing angular bracket '>' of <html...> tag.
 xmlns:og='http://ogp.me/ns#'

So that it will looks like:
<html b:version='2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

* There may be variation in your <html...> tag. It can contain more or less namespace declarations.

6. Now save your template.

Setup Open Graph Protocol For Facebook

Now we can setup OGP for Facebook. For that follow steps given below.
Repeat steps 1 to 3 given above.
4. Search for
</head>
and add following lines just before it.
     <!-- Start Open Graph Protocol --> 

    <meta expr:content='&quot;en_US&quot;' property='og:locale'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta content='article' property='og:type'/>
    <meta content='ABOUT PAGE URL (EX:http://www.ezyhow.com/p/about.html)' property='article:author'/>
    <b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    </b:if> 
    <meta expr:content='data:blog.title' property='og:site_name'/> 
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='DEFAULT THUMBNAIL / FAVICON URL IF NO THUMBNAIL IS NOT AVAILABLE' property='og:image'/>
    </b:if> 
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    </b:if>

    <!-- End Open Graph Protocol -->

5.You must change the text in line no. 3, 8 and 16 with appropriate one's.
Line 3: en_US (US English) is language of your blog. You can change it as per your blog language, such as en_GB for United Kingdom English.
Line 8: If your blog does not have about page then you can remove this line
<meta content='ABOUT PAGE URL (EX:http://www.ezyhow.com/p/about.html)' property='article:author'/>
Line 16: Default thumbnail (generally favicon of your blog) should be of at least 200 X 200 pixels . This will be displayed when no thumbnail is present in post or it is smaller then 200 X 200.
6. (Optional) In addition to above lines, you can also add following lines:
<meta content='FACEBOOK APP ID' property='fb:app_id'/>
<meta content='FACEBOOK PROFILE ID' property='fb:admins'/>
Here also, you must change FACEBOOK APP ID and FACEBOOK PROFILE ID with appropriate one's.
Facebook App Id: If you do not have a Facebook app id then go to https://developers.facebook.com/apps and create your app and get app id.
Facebook Profile Id: For Facebook profile id go to FB ID Finder and find your numeric profile id.

7. Now Save your template.

After all this, Is there a way to verify the above implementation? Answer is Yes. You can verify above implementation by going to https://developers.facebook.com/tools/debug/ . Enter your blog URL there and click Debug button.

Note: Result of Facebook Open Graph Object Debugger can contain some warnings but it should not contain any error. If there is any error check your modifications you made in template. If no mistake is found then you must upload your backup template and redo all the above steps again.

You may also want to read How to browse internet privately in Mozilla Firefoz & Google Chrome

Setup Open Graph Protocol For Twitter Cards

If you implement OGP for Twitter cards, your tweets will have a new attribute i.e. View summary. Your tweets will look like :
Twitter View Summary Example

Upon clicking on View summary option it will provide viewers with more information about your blog, article , its description, link , site logo etc. You can see it in image given below:
Twitter View Summary Upon Click

Now let's focus on its implementation. To implement Open Graph Protocol for Twitter cards in blogger follow the steps given below:
Repeat steps 1 to 3 given above in OGP namespace declaration.
4. Search for
</head>
and add following lines just before it.
    <!--  START OF TWITTER CARD IMPLEMENTATION   -->
    <meta content='summary' name='twitter:card'/> 
    <meta content='@YOUR_TWITTER_HANDLE' name='twitter:site'/>
    <meta content='URL_OF_YOUR_BLOG' name='twitter:domain'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:else/>
    <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>  
    </b:if>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
    <b:else/>
    <meta content='DEFAULT THUMBNAIL / FAVICON URL IF NO THUMBNAIL IS NOT AVAILABLE' name='twitter:image:src'/>
    </b:if> 
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
     </b:if>
    <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
    <!--  END OF TWITTER CARD IMPLEMENTATION   -->

5. You must update the line no. 3, 4 and 14 with appropriate content.
Line 3: Replace @YOUR_TWITTER_HANDLE with your twitter username. For example @EzyHow .
Line 4: Replace URL_OF_YOUR_BLOG with your blog URL such as http://www.ezyhow.com .
Line 14: Replace DEFAULT THUMBNAIL / FAVICON URL IF NO THUMBNAIL IS NOT AVAILABLE with URL of any default image (generally your blog favicon). It will be used when there is no thumbnail in article or when twitter is not able to find / access it.

6.  Save your template.

Just like the Facebook, you can also validate this implementation by visiting https://cards-dev.twitter.com/validator . Enter your blog URL there and click on Preview Card button. If there is no error in implementation then it will give you a sample how your Twitter cards will look like. As you are doing it first time, it will give you a option to whitelist your summary card. You must whitelist it so that it can be approved by Twitter.

If this post helped you then its pleasure to share this post.






Sharing is a good habit

SHARE

Harinder Singh

A student of computer field who is always ready to learn new things and help others as per his knowledge and experience.

  • Follow Author on Twitter
  • Like Author on Facebook
  • dribbble
  • pinterest
  • behance
  • instagram
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment