Blogger
How to Show Blogger Posts on Twitter Tweets with Large Image
Do you want to show your Blogger posts on Twitter tweets with large image? You’re in the right place. In this tutorial, I will guide you step-by-step on How to show Blogger posts on Twitter tweets with large image/thumbnail by adding the Twitter Summary Card code in your theme.
Twitter posts with large images attract the audience more as compared to the posts with smaller images, as a result you get more clicks on your posts.
Following topics will be covered in this tutorial:
- Add Twitter Summary Card Code in Blogger Theme
- Validate the Twitter Summary Card
- Share on Twitter
RELATED
- How to Set Up Blogger Settings | A to Z
- How to Install Custom Theme in Blogger
- How to Buy a Theme on Themeforest & Download
01. Add Twitter Summary Card Code in Blogger Theme
Follow the steps to add the code of Twitter Summary Card with Large Image in Blogger theme.
- Click the Theme from the Sidebar.
- Click the Downward Arrow attached with the CUSTOMIZE button.
- Click the Edit HTML option.
- Paste the code of Twitter Card Summary somewhere between the <head> </head> tags, as shown below. I have shared the code in the next step.
- Save the theme after you paste the code.
- You are only required to make a one change in the code. Replace @meersworld with your Twitter username.
<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@meersworld'/>
<meta name='twitter:title' expr:content='data:view.title.escaped'/>
<meta name='twitter:description' expr:content='data:view.description.escaped'/>
<meta name='twitter:creator' content='@meersworld'/>
<b:if cond='data:view.featuredImage'>
<meta name='twitter:image' expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")'/>
<b:elseif cond='data:widgets'/>
<b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta name='twitter:image' expr:content='resizeImage(data:imageUrl, 1200, "1200:630")'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
<meta name='twitter:image' expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")'/>
</b:if>02. Validate the Twitter Summary Card
In this section, I will guide you on how to validate your Twitter Summary Card with Large Image.
- Go to Twitter Card Validator.
- Copy any of your blog post URL and Paste in the Card URL textbox.
- Click the Preview card. If there is a problem in validation it will show you an error. Check these resources to fix the validation errors: Troubleshooting Cards | Blogger: Twitter Card image display problem solution.
If there is no problem in card validation, it will show you the card preview with large image and following Log.
Log
INFO: Page fetched successfully
INFO: 35 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully
03: Share On Twitter
Now open a post on your website and share on Twitter. If you see that tweet with a small image clear the browser cache/history and refresh, or open your Twitter account on some other browser to see the changes.
- Get access to all our Blogger Tutorials.
- If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.
Also Read:
