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
yes
Deletecheck out mine blog- www.mycricweb.blogspot.com
thank you.
ReplyDeleteVery nice information :)
very good information
Deleteam 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)
This comment has been removed by the author.
Deleteif you using unofficial blogger template, try this ;
ReplyDeleteits work for me.
I am using an unofficial blogger template which doesn't have any meta description stuff in it, and I can't see your info about what I should add? It isn't coming up in your comment
Deletethank you, it works :D
ReplyDeleteThanks its working
ReplyDeleteHi i integrate the code but the tittle tag missing. In card validator when i type the main domain www.panayanon.com tittle tag missing but in my blog post the twitter card is rendered. How could i fix this?
ReplyDeleteFor those getting the description error, try this instead. In his code snippet, I replaced:
ReplyDeletedata:blog.metaDescription
with
data:blog.pageTitle
Then you don't need to do anything special in each post.
thanks for dad ideal, i solve all problem in mine
ReplyDeletemy site is https://www.mysourceng.com/
and dis the code that work for me
Realy nice post and information you provide its impressive.
ReplyDeleteHuawei Y7 2019 price in Pakistan
Best jazz lock down offer
ReplyDeleteThis is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck. Alexander Malshakov
ReplyDelete