Sunday, October 2, 2016
Complete Tutorial on Facebook Open Graph
Complete Tutorial on Facebook Open Graph
Facebook Open Graph allows you to use custom site title, URL, description and even a custom image when you share your page. If you use Facebook Open Graph code on your site, every time when you share any page, it will be counted directly for your home page. Suppose, if I share the following URL on Facebook -
http://www.markspcsolution.com/2014/09/complete-tutorial-on-facebook-open-graph.html
The sharing/ like will be counted for -
http://www.markspcsolution.com/
But If there is no open graph code on my site, the sharing of the first URL will be counted individually. And the sharing will not be counted for your home page. Now I guess, youve understood the importance of open graph. Its really helpful to increase facebook likes of your site rapidly.
Couple of days ago, I discussed about how to claim a site on Facebook. Following the same method, you can place Facebook Open Graph code on your site. Open graph code is as follows:
You have to place the above code in the head (<head> </head>) section of your sites HTML. The code must be placed before closing head tag - </head>.
Now follow the steps below:
Couple of days ago, I discussed about how to claim a site on Facebook. Following the same method, you can place Facebook Open Graph code on your site. Open graph code is as follows:
<meta property="og:title" content="Site Title">
<meta property="og:description" content="Site Description">
<meta property="og:type" content="Content Type">
<meta property="og:url" content="http://www.example.com/">
<meta property="og:image" content="Custom Image Link">
<meta property="og:site_name" content="Your Site Name">
<meta property="fb:admins" content="Your Numeric FB ID">
You have to place the above code in the head (<head> </head>) section of your sites HTML. The code must be placed before closing head tag - </head>.
Now follow the steps below:
- Go to Facebook Insights > Domain Insights > Add your Domain
- Type your home page URL > Copy the Numeric FB ID > Keep the window open
- Go to your sites code or HTML and find the closing header tag </head>
- Place the above code before closing header tag
- Now back to the Facebook Insight Page
- Hit on the Get Insights button
- Now you should be able to see your domain under the Domain Insights section
There are 7 meta properties in the above code. You have to change in the content option. Make sure youve used them properly. Im gonna clarify the points -
- Site Title Example - Marks PC Solution.
- Site Description - Whats your site about. Example - Your Ultimate Choice for Computer, Internet, Blogging, SEO & PC Troubleshooting Tips!
- Content Type - Website/ Blog/ Article/ News etc.
- Site URL Example - www.markspcsolution.com
- Custom Image - Upload your desired image in a server. Then simply copy and paste the link here. You can use postimage.org to upload image.
- Type your Site Title here. Example - Marks PC Solution.
- Numeric FB ID that youve got from the 2nd step in Facebook Insights Page. You can also find numeric by this method.
Troubleshooting
If you face any problem after implementing the code on your site, you can take help of Debugger. Here you can paste your site URL and debug the errors. You can check whether all properties are functioning normally or if there is a problem.
Remember, you can omit some properties. If you use Custom Image, then it will be same for any link of your site. So you can also use a shorter version of the code as below:
<meta content=Website property=og:type/><meta content=http://www.example.com/ property=og:url/><meta content=100002127563096 property=fb:admins/>
It will do the same job for you. You can also use multiple Admin IDs. Simply add more numeric IDs in the admin property.
If you need any support regarding Facebook Open Graph, please leave a comment . . .
Stay with Marks PC Solution to get more interesting IT topics!
Go to link download
