How to Apply Facebook OpenGraph and Twitter Card on Blogger Within 10 Mins

Share on Google Plus

Web to Social Network

For some bloggers and website owners, it is a nightmare to get the right contents of their article to show as a snippet when share on social media, especially on Facebook and Twitter. For this reason, we will be teaching how Blogger (Blogspot) users can fully setup their blog to display the right snippet when their posts are shared on these social networks.

Generally, the procedures are different for both of these two social networks, but we have combined the codes needed to get this started so multiple aims can be archive at once. For Facebook we have "Open Graph", while Twitter preferred to call theirs "Card". Implementing Facebook Open Graph and Twitter Card on your blog ensures the right snippet of your article such as post title, description and featured image are display when your content is shared on these two social networks, which can greatly helps in attracting clicks. As blog owners we know what that means.

Post Snippet Showing on Whatsapp
Hint: Do you know that enabling Facebook Open Graph also lets your post snippet show on Whatsapp and Instagram?

There are different types of Twitter cards, we have the summary card, photo card, larger summary card and more. In this article, we will only be sharing how to enable Twitter summary card for Blogger as well as Open Graph. Its quite simple and will only takes ten minutes of your time.

Please do note that this procedure is meant for blogger/blogspot users only. It works on all templates. 

Lets get started.


Instructions:


Copy the codes above and paste it in a notepad, follow the instructions below.

1.) Replace the "YOUR SITE NAME" in the code with your blog name e.g My Tech Blog.

2.) Replace the "YOUR SITE LOGO URL" with the URL address of your site logo. For instance, you can upload your site logo (should be around 400px) to imgur.com then copy the direct link.

3.) If you have a facebook page, replace the "YOUR FACEBOOK APP ID" with the facebook ID of your page.

4.) Replace "@YOUR TWITTER HANDLE" with your site twitter handle e.g @techblog.

5.) Make sure you copy the code exactly as we put it above, then go to your blogger template by navigating to Template -> Edit HTML (make sure you create a backup). Search <head> using CTRL+F, then paste the code right below it.

More Instructions:


1.) To make the Open Graph and Twitter Card works effectively, make sure you enable "Meta Description" in your blogger settings. You can locate this by going to Settings -> Search Preference -> Description.

2.) Make sure all your posts have meta description. Make sure each post you publish as its own meta description. You can see this under "Options" when composing a new post.

To verify if the Twitter Card and Open Graph works, use the validators below.

Twitter Card Validator
Open Graph Debugger/Validator

If you face any problem do let us know via comment.
Share on Google Plus
Read it in Your Language

About CCN World Tech

logo
CCN World Tech is a platform specifically dedicated in providing latest tech related news and articles around the world. We also tutor people on how to get the best out of their handheld and tech pertaining devices. You can follow us on Facebook, Twitter, and Google+.

    Post Comment
    Facebook Comment

0 comments:

Post a Comment

Leave a reply

Disclaimer: Informations provided on this site are verified and are deemed to be accurate, but notwithstanding, they are subjected to be edited, rewritten, or modified at anytime.