Want to show your blog posts summary with Tweets? This feature is available for anyone by Twitter. It is called Twitter Cards. You need to configure your blog/site according to Twitter guide in order to display your links summary in tweets. WordPress.com blogs already have this support but for WordPress.Org blogs you need some Twitter Cards plugin or edit your template.Here I am going to tell you how can you make your blogspot/blogger blog posts to display summaries of your blog links in Tweets.
It is very easy, just copy paste this code into your blogspot blog template before </head> tag. You need to edit only one thing in this code, that is Twitter username. Put your Twitter username and use the code given below.
<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@YOUR-TWITTER-NAME' name='twitter:site'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<!-- end twitter card details -->
If you want to include a single author name also, then include the line given below in code with Twitter username of author
<meta content='@AuthorTwitterID' name='twitter:creator'/>
<meta content='@AuthorTwitterID' name='twitter:creator'/>
To Check if you have configured your blog/website to work with Twitter Cards, go
to dev.twitter.com/docs/cards/preview and input a post or page address in Media URL box and click Preview card (Leave HTML Tags box empty).
Once you are sure that you have successfully installed Twitter Cards code on your blog, visit dev.twitter.com/form/participate-twitter-cards to apply. When approved, your links will start to show summaries with Tweets :)
to dev.twitter.com/docs/cards/preview and input a post or page address in Media URL box and click Preview card (Leave HTML Tags box empty).
Once you are sure that you have successfully installed Twitter Cards code on your blog, visit dev.twitter.com/form/participate-twitter-cards to apply. When approved, your links will start to show summaries with Tweets :)
Thanks for the info. Aaqil.
ReplyDeleteI followed your instructions exactly, but when I check the preview I get the error:
"Missing Tag: twitter:description"
Any ideas?
Pls paste the code or screenshot here which u used at your blog. And tell me your blog url also.
DeleteI figured it out Aaqil. You have to have a meta description for EVERY post and not just the blog as a whole! That's a lotta work.
ReplyDeleteoh hehe :D by the way that is good thing to have description optimized for every post and page. Helps in SEO.
DeleteWait, so is there a fix or not? I'm trying to implement this and I'm also getting the meta description error upon previewing the card... Let me know.
ReplyDeleteCan you post your code and blog link here?
DeleteHere's the code, which I've posted under the head section of my site www.disarraymagazine.com :
DeleteScreenshot of code: http://screencast.com/t/iPKlU02JEmZ
Screenshot of Twitter's Preview Card error:
http://screencast.com/t/NjYr8pdDS
Hopefully, you can help. =)
I've implemented your code, here's the error I see from Twitter's preview card: http://screencast.com/t/NjYr8pdDS
DeleteI think you are pasting code at some wrong place.
DeleteGo to you template HTML editing page and press CTRL+F key from keyboard (firefox, chrome) and type (without spaces between head and / in Find box. Then paste the code just about tag.
Like mine: screenshot http://goo.gl/ayBXZ
I place code like your says but when i test , is show "Missing Tag: twitter:description"
DeleteI think is not problem with place that your say in screenshot above
thank you.
ReplyDeleteVery nice information :)
am getting this error
ReplyDeleteMissing Tag: twitter:description
Unknown Screen Name: twitter:creator; value=@AuthorTwitterID
Fahad please paste your code here which you are using.
DeleteAlso mention your twitter username.
I shall try to correct the code for you.
Mine code before head tag. screenshot: http://goo.gl/ayBXZ
DeleteI place code like your says but when i test , is show "Missing Tag: twitter:description"
ReplyDeleteI think is not problem with place that your say in screenshot above
Are you using some official blogger template? If not then does your template have description meta tag for posts/pages?
DeleteIf yes then do you write post description for every post?
(I am not toooo expert, just trying to help with what comes in my mind)