Home » Blogger Tutorials, Tricks and Hacks » Blogger Posts / Archive Tricks » Implement Your Twitter Cards For Your Blogger/Blogspot Blogs

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Implement Your Twitter Cards For Your Blogger/Blogspot Blogs

Implement Your Twitter Cards For Your Blogger/Blogspot Blogs

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

527 views

Our featured Blogger tip for today comes from Mohamed Basheer of BloggerHow, and it has something to do with implementing Twitter cards on your Blogger site. Before I continue, I want you to keep in mind that although this may be of a “How-to” tutorial for Blogger, it is in the end, actually a feature for your Twitter.

So what is Twitter card? It is a new way of showing your blog content inside your tweets. Once you have implemented Twitter card in your site, your readers will be able to see a brief description of your posts’ content in your Tweets, an image thumbnail in your post, and the website and author’s Twitter handle, once they click on the expand button.

The feature is still currently in its development stage but you might as well get your site ready for Twitter card.

So how do you implement Twitter cards in your Blogger? Follow the steps below:

  1. In your Blogger dashboard, go to ‘Template’, click on ‘Edit HTML’ and then ‘Proceed
  2. Using ‘Ctrl+F’, look for the </head> tag
  3. Copy/paste the following code before it:
<!-- twitter cards -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name="twitter:url" expr:content='data:blog.url' />
<meta name="twitter:title"  expr:content='data:blog.pageName' />
<b:else/>
<meta name="twitter:url" expr:content='data:blog.homepageUrl'  />
<meta name="twitter:title"  expr:content='data:blog.title' />
</b:if>
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name="twitter:image"/>
<b:else/>
<meta content='WEBSITE_FAVICON_IMAGE_URL' name="twitter:image"/>
</b:if>

(If you already implemented the Open Graph Protocol, you’ll only need to copy the first three tags)

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/>

4. Replace the following highlighted code with that of your own account username.

5. Save your template.

6. You then need to apply for participation to the project by clicking on this LINK.

And you’re done! Once Twitter is finished with the development stage, you can then make full use of Twitter card’s feature.

Liked It ? Please Share

Comments

6 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. MyLife.com says:

    Internet Marketing Service Guide Of Important Terms Such As Search Engines Optimization , PPC, SEM, SMO, Web Promotion In The Area, Internet Marketing.

  2. Hi really very nice post on this blog

  3. strzelanki says:

    I every time used to read article in news papers but now as I am a user of net
    thus from now I am using net for content, thanks to web.

  4. hima says:

    nice posting……….

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here