This post is one I had been toying with writing for a while but wasn’t sure if anyone would find it helpful or not. Adding a summary card to Blogger if you’re not sure of code can be tricky and it’s taken me several attempts to get it right and I thought I would share my knowledge too.
Sidenote – this will only work if you’re sharing a direct link via Twitter and not a shortened URL via Tweetdeck, Buffer or a similar platform.
Before you start one thing you need is an image for when you share your standard blog link as opposed to a post link which has an image in it. I use picmonkey and there are more tips in my how to create a blog image post. If you already have an image you want to use then it needs to be resized to 120 by 120 pixels to be the right size for the twitter card. As with a blog button, this image also needs to be uploaded to an online photo sharing site such as imgur or photobucket in order to work correctly.
<meta content=’summary’ name=’twitter:card’/>
<meta content=’@WishHopeDreams‘ name=’twitter:site’/>
<b:if cond=’data:blog.pageType == "item"’>
<meta expr:content=’data:blog.pageName’ name=’twitter:title’/>
<b:else/><meta expr:content=’data:blog.pageTitle’ name=’twitter:title’/>
<meta expr:content=’data:blog.metaDescription’ name=’twitter:description’/>
<b:else/><meta expr:content=’data:post.snippet’ name=’twitter:description’/>
<meta expr:content=’data:blog.postImageUrl’ name=’twitter:image:src’/>
<b:else/><meta content=’image URL‘ name=’twitter:image:src’/>
Basically the code above is telling Twitter what it should display when you share your blog links. The only things that need to be edited are the two items in the red text. The first is your twitter handle including the @ (mine is shown for reference) and the URL of the image you created and uploaded in the first steps above.
What I find easiest to do is copy the code into a blank blog post or a word doc, change the two items in red and then copy it into Blogger. If you prefer you can copy the code into Blogger and then make the changes. Basically, do what works best for you but I’d suggest that if you’re not that comfortable with coding then you go for the first option.
In order to copy the code into the right place, in the template tab in Blogger, click edit HTML, click in the box and then CTRL+F to bring up the find box. Copy this <b:includable id=’post’ var=’post’> into the box and hit enter. Click the ellipsis (…) next to the highlighted line of code to expand it and it makes sure you’re copying the code into the right place.
Copy your edited code directly below the code searched for which will be highlighted yellow in the search box. Then save the code and exit the template editor.
Next step is to make sure that the code you’ve added to blogger actually does what it’s supposed to. That’s where the Twitter card validator comes in. Open a blog post (must be a post and not the homepage) and copy and paste the URL into the box on this page and click preview card. If it’s all ok it will show up and be all ok as in the image below.
Yes, I had to use AJ’s blog as my example as due to moving over to WordPress, my links perform differently on Twitter.
After that every time you share a blog link on twitter it will have the summary and image. If there is no image in the post it will show as the image you sent over to me (this is what will also show if you just share your blog link and not a post link).
Hope this helped those of you that are looking for the way to have your links show with an image on Twitter.
If you encounter any issues or have questions about the post leave me a comment below.
Sponsored content or products sent for review purposes are marked with an *. However, all views and opinions are entirely my own. For more information please view my full disclaimer