Monday, July 8, 2019

How to share article from blogger with large image to twitter or How to add twitter card for blogger

Normally, when we share or post (tweets) images and content URL from blogger on twitter page, it will not show large image. According to my experience, I found that the blogger template don’t have twitter card. Mostly, free blogger template does not to add twitter card.  The twitter card or twitter card meta tag is the social media meta tag for social network Twitter that it can enable webpage of blogger become a rich object in the social graph. It mean that when you share or post (tweets) images and content from  blogger into twitter, you will see large image like you post direct on twitter. On this guide, i will show you about how to add twitter card on the blogger.
Step 1: backup your template
Before you start to add twitter card, you should backup your current template first. If you do something wrong, you can restore it back.
  • Login your blogger profile
  • Click on Theme
  • Backup/Restore button and click Download theme. It will download your template into computer.

Step 2: go to “Theme” menu then click “Edit HTML”
Step 3: in HTML box, please click Ctrl + F to find word “ </head> “
Step 4: please copy below code and past between <head> …..</head>

<!--for twitter card-->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@your name' name='twitter:site'/>
<b:switch var='data:blog.pageType'>
<b:case value='index'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:default/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:switch>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta content='@your name' name='twitter:creator'/>
<b:switch var='data:blog.pageType'>
<b:case value='item'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:default/>
<meta content='img-url-for-home-page' name='twitter:image'/>
</b:switch>
<!--end for twitter card-->

Note: @your name is a name URL of your blog. For example my blogger is https://igeneralshare.blogspot.com/ , so you need to input @igeneralshare.



Step 5: click on “Save theme” button.
Step 6: test your configuring
You can test with this URL https://cards-dev.twitter.com/validator to make your twitter card is working.
  • Click on above link
  • Copy your content URL and past into Card URL box
  • Click on “Preview Card”
  • You will see your content with large image at right hand.

Step 7: after you tested on above URL, you should try to share from your blogger to twitter account. So you can see your article with the large images. It means that other people can see the same you.

One more thing, if you want to change type of twitter card, you can copy or edit Meta tag between <head>………</head>
<meta content='summary' name='twitter:card'/> 

I hope that this guide can help you to share content into twitter with large image. It is very important for blogger to show interest large image. This thing should your requirement.

No comments:

Post a Comment