Recently on Facebook, When I was shared one of my blog content , it not shows any Images of my blog posts. On the other hand when I look at the other website links Facebook crawls that content with Images, I Googled it out about the problem and find solution to Open Graph Meta Tags For Facebook is missing on my website. It inspire me to write this tutorial for Blogger which is Pretty simple and Straight.
See My post how it look like
Facebook has a set of open-graph meta tags and it should be present inside the
tag at the top of your page. You can edit title, description and image of content what you are sharing.The basics of Open Graph markup include:
- og:title = title of post e.g., "How to Hide Facebook Friend List from Others"
- og:url = URL of post e.g., "http://www.solvelogger.tk/2016/09/hide-facebook-friend-list-from-others.html"
- og:description = describing post(You Can Manually Edit It As you Like)
- og:image = URL to unique image at least 200*200 pixels
- og:type = article (otherwise defaults to website)
Its really simple task just follow these easy steps:
1. Go to Blogger > Dashboard > Template > Edit HTML
2. In the editor, at the top you will see html xmlns just similar like following code:
3. Paste this code,
xmlns:og='http://ogp.me/ns#' before closing the head tag, just like below codes. But if you don't find this code copy all this code and paste this code above to <html 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#'>
4. Congratulation you have successfully added Facebook Protocol Tag, lets move further to add Open Graph Meta Tags in blogger. Find the tag
<meta content='logo-link' property='og:image'/>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
5. Here you need to logo-link with your Blogger Blog's Logo link, add atleast meet Facebook share image criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format. It also you need to replace your app_id and fb_admins respectively and then just hit Save Template.
How to Get fb-admins: Your Facebook ID [Find Here]
Copy That and placed it to your Open Graph Meta Tags.
How to Get app-id:
- To create a Facebook Application ID, Go to the Facebook Developers Apps page, and sign in with your Facebook username and password.
- Click the "Add a New App" button. A box pop up Click Website. Enter a name for the application in the "App Name" field or Click on Skip Quick Start and Filled the required box.Next, scroll down to the "Facebook App ID" e.g. appId : '1523672161247135', and Enter your website URL in the "Site URL" field (e.g. http://www.solvelogger.tk ), click next to finished.
Copy That App ID and placed it to your Open Graph Meta Tags.
That's it I hope this article really helpful to integrate Facebook Open Graph for your blogger blog. After some time go to you blog post and try to share it. To make sure your Open Graph tags have been properly configured, use Facebook's Open Graph Debugger Tool to see a preview of how your post will appear in Facebook.
No comments:
Post a Comment