Tweeting your blogpost the KISS way (#2) - Twitter | CutieCoding

Estimated Reading Time:
When we last talked about social media, we set up our Feedburner account and connected our Twitter account to it.

When you link your Twitter account to Feedburner, every time you publish your blog post, it gets triggered  to create a shortened URL in goo.gl.

(Here's my rant about it when goo.gl broke down for a week)

This shortened link is then tweeted along with your post title or whatever setting you chose in Feedburner. Now, there's one other thing that we should do to make our tweets go from looking good to being great. And that is by setting up Twitter cards.

When you have Twitter cards set up for your blog, you don't have the unnecessary hassle of uploading the pictures from your post to Twitter yourself.

Which means you go looking from something like this:


To this:


Well ...more or less

Note: The following code is applicable for the Blogger platform...because we are partial to it. (To see how to integrate Twitter cards in other CMS platforms, check out Twitter's page here) Also, good news is that this code works on Blogger's dynamic views templates as well - phew!

SETTING UP TWITTER CARDS ON BLOGGER
The TL;DR Version
  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. 
  3. Go to ‘Template’ and  first backup your HTML code by clicking on 'Backup / Restore' and downloading the XML file.
  4. Then, click the ‘Edit HTML’ button under the ‘Live on Blog’ frame.
  5. Now, copy and paste the code below just under the <head> tag.
  6. Before you do that though, change the highlighted parts to include your Twitter handle and the URL to your logo (it should end with either .jpg, .png, or .gif).
  7. After you paste it into your website's HTML code, hit 'Save template'.
  8. You're done-mark! 
<meta content='summary_large_image' name='twitter:card'/> <meta content='@aiguacuteaccent' name='twitter:site'/> <b:if cond='data:blog.pageType == "index"'> <meta expr:content='data:blog.url' name='twitter:url'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <b:else/> <meta expr:content='data:blog.homepageUrl' name='twitter:url'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> </b:if> <b:if cond='data:blog.metaDescription != ""'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> </b:if> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' name='twitter:image'/> <b:else/> <meta content='https://3.bp.blogspot.com/-tLXW1aM3dwI/VxVPMMRwPEI/AAAAAAAAAL0/dKWVJRj20qwuCzPjIT7-YkmYmf9qpB79QCPcB/s1600/aigu_icon.png' name='twitter:image'/> </b:if> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

If you have multiple authors posting on your Blogger Blog

This only works if the authors have their own Twitter handles. If they do, instead of the code above, enter the one below instead: One more thing, the name you enter should match their Blogger profile name exactly, otherwise it doesn't work.
  <meta content='summary_large_image' name='twitter:card'/> <meta content='@aiguacuteaccent' name='twitter:site'/> <b:if cond='data:post.author == "Ray"'> <meta name="twitter:creator" content="@wheneverRaygetsroundtoit"/> <b:if cond='data:post.author == "Rumi"'> <meta name="twitter:creator" content="@Rumiapplieshashtags"/> <b:else/> <meta name="twitter:creator" content="@aiguacuteaccent"/> </b:if> <b:if cond='data:blog.pageType == "index"'> <meta expr:content='data:blog.url' name='twitter:url'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <b:else/> <meta expr:content='data:blog.homepageUrl' name='twitter:url'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> </b:if> <b:if cond='data:blog.metaDescription != ""'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> </b:if> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' name='twitter:image'/> <b:else/> <meta content='https://3.bp.blogspot.com/-tLXW1aM3dwI/VxVPMMRwPEI/AAAAAAAAAL0/dKWVJRj20qwuCzPjIT7-YkmYmf9qpB79QCPcB/s1600/aigu_icon.png' name='twitter:image'/> </b:if> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

COUPLE OF NOTES
In order to make sure that your posts are tweetable in this format, you need to have the following requirements met:

1. ALWAYS HAVE A POST DESCRIPTION: To add in a search description for your post, just add a few short lines about your post in the Blogger post editor like this:


Whatever you put there will be the description that shows up in the tweet. It's the same place that Facebook and G+ pick up their descriptions from too.

So, it's important.

2. HAVE ATLEAST ONE IMAGE: It's a no-brainer but needs to be said that an image needs to be there in the post, otherwise it will show an error. It'll always pick up the first image in the post.

Make sure that your image has a high resolution. When you insert an image in Blogger, it automatically changes the quality to whatever size you picked in the article.

Sometimes, it's not sufficient for the Twitter card to show your image. Go back to your post editor, click on HTML to edit your post's HTML code, find your image URL and change it from "https://1.bp.blogspot.com/-.../s320/...jpg" to "https://1.bp.blogspot.com/-.../s1600/...jpg" and update your post.
 
3. VALIDATE THE LINK AFTER EACH POST: After you're done publishing your post, make sure to validate the post's URL on this Twitter Card Validator page.

MORE NOTES ON GOO.GL
  • Don't check your twitter the second after you publish your post (like I obsessively do). It takes 30 minutes at the most 
  • If you needed to update your post, a new goo.gl link is not created. So don't be afraid to make edits to your posts.
  • Checking the clicks of your goo.gl links is really simple. You can either log in to http://goo.gl or type in '.info' at the end of your goo.gl link. Though the latter method is currently not working for Feedburner-generated links because of the recent change

TWITTER ANALYTICS
Make sure you set up your Twitter Analytics account by going to analytics.twitter.com - this one doesn't happen automatically, ya know.

...o0o...
Ray out! Peace!

Read more blogging tips on CutieCoding

Comments

Popular Posts