My Blogger TricksAll Blogger TricksTechtunes

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 

facebook open graph tags

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 == &quot;item&quot;'>
<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 != &quot;&quot;'>
<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.

Advertisement

2 comments:

  1. I saw this very affordable brand naming firm. They now have an online course that really is efficient in learning. I also heard how fun the session is. daycare photography in Sydney.

    ReplyDelete
  2. "PEAKERR provides Best SMM Panels Services & Cheap SMM Panel Services In The World. For Youtube Views Panel, TikTok Services Panel, Facebook Services Panel, Instagram Services Panel, And Many More. cheapest smm panel
     "

    ReplyDelete

 
Top