Saturday, November 21, 2015

How to Install Twitter Cards on Blogger

This blog uses affiliate links. Basically, I make a small commission when you use these links, at no additional cost to you.

Get free sensory processing resources & sensory diet printables

I mentioned recently how Twitter cards can help your blog work harder by showing large photo links on Twitter every single time someone shares your blog post. Because let's face it, photos on Twitter are more likely to be retweeted and shared than just text only tweets.

However, when I first tried installing the large summary Twitter cards on my Blogger template, I had trouble actually finding a tutorial that worked. Of course, there seems to be lots of tutorials to help Wordpress users, but so few for Blogger users. I tried two or three different ones with zero success. I finally found one that works, not just on my blog, but on Frugal Autism Deals as well. So here's how to install Twitter cards on Blogger.

How to install Twitter cards on Blogger from And Next Comes L

Important: Always back up your template before making changes to HTML. Find out how to back up your template on Blogger here.

How to Install Twitter Cards on Blogger

1. Go to the Template section in the Blogger dashboard.

2. Click on Edit HTML.

3. Click anywhere inside the HTML box and press CTRL+F. Search for:

</head>

4. Insert the following code before </head> code:

<meta content='summary_large_image' name='twitter:card'/><meta content='@andnextcomesl' name='twitter:site'/><meta content='@andnextcomesl' name='twitter:creator'/><b:if cond='data:blog.pageType == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='twitter:title'/><b:else/><meta expr:content='data:blog.pageTitle' name='twitter:title'/></b:if><b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/><b:else/><meta expr:content='data:post.snippet' name='twitter:description'/></b:if><b:if cond='data:blog.postImageUrl'><meta expr:content='data:blog.postImageUrl' name='twitter:image'/><b:else/><meta content='http://1.bp.blogspot.com/-nS9BnKlFnoU/VSdFdUb9bYI/AAAAAAAAR3I/AfVDkHp7uUA/s1600/square-logo-andnextcomesl.com.png' name='twitter:image'/></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'><meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><b:else/><meta content='http://1.bp.blogspot.com/-nS9BnKlFnoU/VSdFdUb9bYI/AAAAAAAAR3I/AfVDkHp7uUA/s1600/square-logo-andnextcomesl.com.png' property='og:image'/></b:if>

5. Replace the Twitter handle (highlighted in green) with your own handle.

6. Replace the images (highlighted in orange) with your own image URL. This image shows if the post doesn't have a photo in it.

7. Click on Save Template.

8. Make sure your code is working properly by validating your Twitter card with the Twitter Card Validator. Just paste any blog post URL into the validator. You should get something similar to this:

How to install Twitter cards on Blogger from And Next Comes L

Share This:  

Browse these popular categories


Autism parenting resources Hyperlexia resources Sensory diet activities Speech activities and printables Social skills resources Emotional self-regulation resources
Get free sensory processing resources & sensory diet printables

0 comments:

Post a Comment