Are you familiar with Twitter Cards? I am just curious looking at my co-bloggers twitter link, I thought they just post the photo then put the description, the same as we post our statuses at our Facebook timeline wherein we post photo and put description and link. Then I found out about this TWITTER CARDS when I change my blogger templates.
Twitter Cards is the newest functionality develop by TWITTER, that makes it possible to attached photos, videos, or other media preferences straight from your website. Tweets that link to your content, when other users tweets your link will have a card added to the TWEET POST that's visible to other users/followers. But before I go to the tutorial, let me first help you get acquainted with different types of Twitter Cards that used mostly by Bloggers.
Summary Card - Can be used for many kinds of web content, like the blog post and news articles online. It is designed to give a preview of the content before clicking your site. This is good for product review, fashion, web article and restaurant endorsement.
Summary Card with Large Image - To give your followers a nice large, full-width prominent image with a tweet summary description about your post. Good for Food, Travel and Beauty bloggers.
Photo Card - Here you can see the frontal and center Image of the photo you have tweeted, and by clicking it you will see the full and detailed view of the photo. This is used by most of the photographer, traveler and design bloggers.
Gallery Card - A collection of photos which tell your follower when you about to click the link you will see more photos in the post. Used mostly by Real Estate Broker/Agent and Travelers.
See other types here >>> Twitter Cards
*Sample photo taken from Twitter Cards.
A. Step-by-step Tutorial For Bloggers using Splendid Free Templates:
There are two set of a guide that I used here. Honestly, I am having a hard time setting up with the code snippet that instructed given to me by my templates developer. But I religiously studied and followed all what is given from their step-by-step tutorial.
In my Pink Blossoms blog, I used this tutorial:
First, Go to Blogger Templates > Edit > CTRL F then type this code: <b:includable id='post' var='post'>
Second, you will see a code something like this:
Third, change @yourname to your Twitter account handler name, and www.yourname.com to be your site URL.
B. Another way to put Twitter Card for blogger for any other kind of template use.
This is done for only 2 minutes.
Follow step 1(A) and type this code <head> and paste this code snippet just below it.
<head>
Summary Card - Can be used for many kinds of web content, like the blog post and news articles online. It is designed to give a preview of the content before clicking your site. This is good for product review, fashion, web article and restaurant endorsement.
Summary Card with Large Image - To give your followers a nice large, full-width prominent image with a tweet summary description about your post. Good for Food, Travel and Beauty bloggers.
Photo Card - Here you can see the frontal and center Image of the photo you have tweeted, and by clicking it you will see the full and detailed view of the photo. This is used by most of the photographer, traveler and design bloggers.
See other types here >>> Twitter Cards
*Sample photo taken from Twitter Cards.
A. Step-by-step Tutorial For Bloggers using Splendid Free Templates:
There are two set of a guide that I used here. Honestly, I am having a hard time setting up with the code snippet that instructed given to me by my templates developer. But I religiously studied and followed all what is given from their step-by-step tutorial.
In my Pink Blossoms blog, I used this tutorial:
First, Go to Blogger Templates > Edit > CTRL F then type this code: <b:includable id='post' var='post'>
Second, you will see a code something like this:
Third, change @yourname to your Twitter account handler name, and www.yourname.com to be your site URL.
B. Another way to put Twitter Card for blogger for any other kind of template use.
This is done for only 2 minutes.
Follow step 1(A) and type this code <head> and paste this code snippet just below it.
<head>
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.metaDescription'> <meta content='summary_large_image' name='twitter:card'/> <meta content='@bloggerrecipes' name='twitter:site'/> <meta content='@bloggerrecipes' name='twitter:creator'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' /> </b:if> </b:if> </b:if>
Make sure to replace the @bloggerrecipes with your own Twitter Handler Name.
I choose 'summary_large_image' Twitter card type.
And test and submit the new code made with the Twitter Validator. This will be the outcome:
So if you're going to share your Twitter post to your follower, this will be the result.
Source: BloggerDIY and Bthemez
