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 add border in Google Blogger Images without adding CSS"
*.
og:url= URL of post e.g., "http://tricksduniya.com/Thread-L1-L2-L3-2617-proxies-list-October-9-2015"
*.
og:description= describing post(You Can Manually Edit It As you Like)
*.
og:image= URL to uniqueimage at least 200×200 pixels
*.
og:type= article (otherwise defaults to “website”)
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 :
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'>
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 :
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 in your blog and paste the following line of codes below it.
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og: site_name'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
<meta content='logo-link' property='og:image'/>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta expr:content='data:post.snippet' name='og:description'/>
<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 app-id and fb-admins:
*.Go to the
Facebook insights page (login as user, not in your page) located here:
https://www.facebook.com/insights/
*.A box should open.
DO NOT FILL THE FORM OUTYET.
In the bottom half ofthe box you should see a bit of code.
It will look like this: <meta property="fb:admins" content="XXX"> Copy this code.
*.Place the code that you just copied into Open Graph Meta Tags of your website. If page have two admin it separated with comma.
*.Don't Fill Out Domain Name in that box, If you try to do so, it would give this error message (Getting an error "No admin data found at root webpage
http://Tricksduniya.com/.
Insights requires admin data at this root webpage for the specified URL Tricksduniya.com") because we haven't get out App ready.
*.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. app Id : '1523672161247135', and Enter your website URL in the "Site URL" field(e.g.
http://www.Tricksduniya.com ), click next to finished.
*.Copy That App ID and placed it to your Open Graph Meta Tags.
*.Return to Facebook Insights, complete the domain section of the form and hit Get Insights.
And
That's it
Possibly Related Threads…
Best way to Remove Widget Bundle CSS file from Blogger
