In the below post, I will teach you how to set your blog for twitter card. Some others do but they failed because of wrong meta tags that will mess up there blogs and looks completely shits in twitter card. As you know that Twitter recently released it’s twitter card for site that after some tweaking, we made it for blogger too. Through this card, you can show off your rich media of your blog post in twitter tweets. Like you can show your blog post image, full description tag, title, url etc that means your whole post description can be seen in twitter tweet.
After this card, when you tweet your post and somebody will see this, then he will experience “View/Hide Summary” link below your tweets. If anyone clicks the summary link it will expand and show the post description snippet, along with a thumbnail image, Page title and twitter account attribution etc in short your Twitter Card.
To see the demo, visit our twitter page: @EXEIdeas
We achieved it by integrating “Twitter Summary Cards” with Blogger. Twitter card is not a new name because they were introduced last year and the reason we never talked about it was due to unavailability of custom XML tags in blogger code library. Many blogger share this code but they failed to set the perfect. Something image will not be shown up and some time description error. So we did it all in one and fully perfect. We also made it ready to use like 123. This is as same as Open Graph Protocol and also the same mistake is seen for Open Graph Tags which I write in another tutorial.
OpenGraph Tags Vs Twitter Cards:
Open Graph is introduced by Facebook to pick the right data from a web page and share it on their social network. Likewise Twitter introduce Twitter Card to fetch the correct data from the web page and share it perfect on twitter profile. Following is the list of six twitter cards being introduced by twitter in order to display user content in a more friendly way on Twitter accounts.
- Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
- Large Image Summary Card: Similar to a Summary Card, but Features bigger size images.
- Photo Card: A Tweet sized photo card.
- Gallery Card: Displays a collection of photos.
- App Card: Displays application profile.
- Player Card: A Tweet sized video/audio/media player card. You can now watch YouTube videos live on twitter! Probably the best card for podcast blogs. Instead of summary link you will see View/Hide Media link here.
- Product Card: It represents product content in a more better way.
Get Free Likes On Your Facebook Status Or Pic Now http://t.co/DcKvDWHaeE
— Muhammad Hassan (@EXEIdeas) July 3, 2013
How To Add In Blogger?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Before </head> Code..
8.) Click “Save Template” And Done.
<!-- Twitter Cards For Blogger By EXEIdeas Start -->
<meta content='summary' name='twitter:card'/>
<meta content='@EXEIdeas' name='twitter:site'/>
<meta content='@EXEIdeas' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta content='LOGO' name='twitter:image'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Twitter Cards For Blogger By EXEIdeas End -->
1.) Replace EXEIdeas With Your Twitter Profile Name.
2.) Replace LOGO With Your Blog Main Logo.
3.) Save And Done.
How To Verify In Twitter?
The final step is to verify your twitter card settings. It is really easy, just follow these steps:
Open Google Chrome or Safari (Twitter cards work on webkit browsers only not Firefox)
1.) Go To Twitter Card Validator.
2.) SignIn/LogIn With Your Existing Twitter Account.
3.) Please Wait Few Sec Then Choose “Summary” Card From “Card Catalog” POPUP.
4.) Click The “Validate And Apply” Tab.
5.) Enter Your Blog Main Page URL And Click “Go!“.
6.) Please Wait Few Sec Then IT Will Show The Ok Image. (As Seen Below)
7.) Then Click “Request Approval” Gray Button.
8.) Then There Will Be A “Request Domain Approval” Form, Fill That Out.
9.) Then Click “Request Approval” Blue Button At The End Of Form.
10.) Wait For Few Days And You Will Be Approved.
Before applying request to be approve, must give a trey with your post URL to see either all bulbs are blue or red because some time on post page, it becomes red on “twitter:description” that mean you didn’t add there description tag. Don’t worry, just apply for it and then add all missing description tags on your blog.
Twitter would say that they would send you an email but they really don’t do that. At least I have received confirmation email for this blogs from twitter as added below. They get approved automatically within 2 min. Once you see summary link below all posts know that you are all set up!
There are two requirements for twitter cards to work properly in Blogger:
1.) Always add Search Description for Posts.
2.) Always add min one Image inside posts.
3.) Add your blog main description tag also.
4.) Add your blog logo also that will be used if your post didn’t contain images.
5.) Rest is ok…
If you have any problems, then don’t try to fix it yourself because it can corrupt your blog template. Just let us know and we will fix it as we always do…