Setting up Twitter Cards in Blogger

There are plenty of blog posts explaining how to add Twitter Card integration to your Blogger posts but I haven't seen any that are written for the newer Blogger UI. The code that does the integration hasn't changed since this article in 2013, but the steps to add it to your theme have. 

If you haven't logged onto Blogger, do so. You should see this panel on your left.

Pick "Theme" and you will see something that looks like this on the top portion of your screen.

First things first, make a backup. Click on the little arrow

If you are using the classic themes, it will look like this. 

After clicking on the arrow, pick Backup. Download the file. It's the same for classic themes.

Pick download. Save the file somewhere just in case you need to recover your theme. While editing your theme will not destroy any of your pages or posts, it can cause problems for the theme you are using if you make a mistake. If you've spent some time editing your blogroll and customizing your colors and fonts, you don't want to lose this so make sure you make a backup.

Now that you have a backup, pick Edit HTML. 

If you are using the classic theme, click on EDIT HTML button rather than activate the context menu from the drop down.  

You should see some scary looking HTML code in a code editor. Click anywhere in the code editor. Once you do that, you need to activate search. If you are using a Mac, pick command-F to search. On windows it should be control-F. 

If you see this search box, you did it correctly. 

If you see the browser search box, you didn't click in the code editor. Close the browser's search pop up and then click in the code editor and try the search command again. 

Search for </head> by typing that and then hitting enter. This will search for the bottom of the head element. 

If you see something like this, you are in the right spot. You should see the </head> tag, which marks the end of the page's head portion and the start of the body of the web page. 

Now you need to copy over the text . Copy it from the block below. 

<!--  START - TWITTER CARD TAGS   -->
<meta name="twitter:card" content="summary"/> 
<meta name="twitter:site" content="@YOUR-TWITTER-ACCOUNT-NAME"/> <meta name="twitter:domain" content="YOUR-BLOG-URL"/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><meta name="twitter:title" expr:content='data:blog.pageName'/><b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/></b:if>

<b:if cond='data:blog.postImageThumbnailUrl'><meta name="twitter:image:src" expr:content='data:blog.postImageThumbnailUrl'/><b:else/><meta name="twitter:image:src" content='URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' /></b:if> 
<b:if cond='data:blog.metaDescription'><meta name="twitter:description" expr:content='data:blog.metaDescription'/><b:else/><!-- Still looking for a way to use the post snippet if there's no description --></b:if>

<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<!--  END - TWITTER CARD TAGS   -->

Following the instructions from this article in 2013 you need to edit the following.

YOUR-BLOG-URL

This the full URL for the blog. 

URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST

This is an image to use when there is no image in the article. You can pick an image previously uploaded to your blog or your Twitter profile image. I removed that block for this blog by deleting this entire section:

<b:if cond='data:blog.postImageThumbnailUrl'><meta name="twitter:image:src" expr:content='data:blog.postImageThumbnailUrl'/><b:else/><meta name="twitter:image:src" content='URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' /></b:if> 

And lastly, the optionally YOUR-TWITTER-ACCOUNT-NAME

You can remove that line if you do not want to use it. 

This is what it looks like on this blog. 

The text needs to be inserted before the </head> tag as the code will only work properly in the page header and not in the page body.

When you are done making those edits, click on the floppy icon to save. It is on the top right corner.

Then click on the arrow in the top left to go back to the dashboard screen. 

You can now test this by tweeting a URL from your blog. If its is working you should see a tweet card with an image from your post, title and blog URL.