Adding Facebook Open Graph Tags to Blogger
If you want to become successful in blogging, you should think about how to grab traffic to your site.Facebook Open Graph Meta Tags is missing in my blog. So that I come here to write this tutorial for blogger who will encounter the same broblem of mine.Now a day, social network become a major source of traffic to website/blog. We use social net work like Facebook, Twetter, Pinterest and so on, to introduce our contents to the followers or readers and the same time we will build a strong following through social media. Recently, When I share my blog content to Facebook, it show something like a blank white (no image) in blog post. I wonder why? I try to ask facebook for help but get nothing. After that, I googled out for the broblem and found the solution that
Adding Facebook Open Graph Protocol Tags
Facebook Open graph should be located inside the <head> and </head> tags at the top of your page.
Now, you should understand some basics of the tage:
If your blog doesn't show any image on facebook, it would be something like this.
<HTML b:version='2' class='v2' 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'>So you just add the open graph "xmlns:og='http://ogp.me/ns#'>" to the open tags of the html, see the following:
Note: If you can't fine all the code above, you just past the following code above the <head>
<HTML b:version='2' class='v2' 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#'>
Adding Facebook Meta Tags
Now find the <head> tags, and past the following meta tags jus below it:
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='Put URL of alternate image' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</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='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='Put URL of alternate image' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</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='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
Getting Facebook app_id and fb_admins
1. Facebook Admins
Where it says app_id and fb_admins in the re color, you have to replace to by your own:
Now just follow the step below:
1. Click here go to Facebook insights page and login with your (user name and password).
2. Click on "Add your domian" and the pop up window will appear. Now you should see a bit code like "<meta property="fb:admins" content="XXX YYY" />"
3. Just copy the number only where I place for "XXX YYY" to replace at meta content='fb_admins' in the red color
2. Facebook ID
To get App ID, you have to go to Facebook Developer bly clicking here and then you have to register with your user name and password.
- At this time, a pop up window will appear just click on Website
- And then choose skip and create App ID. On the next window, you will ask to complete the information and make sure that you don't miss anything.
- After completing the information, click on get App ID
- Copy the App ID and replace in the Facebook Meta Tags above "app_id"
- Last point save your template
Now you are done! Enjoy.
Adding Facebook Open Graph Tags to Blogger
Reviewed by Unknown
on
4/01/2015 11:36:00 PM
Rating:
Reviewed by Unknown
on
4/01/2015 11:36:00 PM
Rating:
No comments: