PHPMatters Help You Better Hosting Your PHP-based Sites
How to Make Twitter Card - Powerful Service to Showcase Content on Tweets

How to Make Twitter Card – Powerful Service to Showcase Content on Tweets

When you browse the Twitter world, have you found some tweets that attach a special card explaining the URL included in the content? This card is named as Twitter card, offered by Twitter community allowing people to enrich their tweets with more detailed information. In the following, we have come out a tutorial concerning about how to make a Twitter card integrated with your website.

Why Use This Card?

In fact, Twitter card is pretty useful for increasing your Twitter followers, which in turn, brings you more website readers and traffic. Generally, people can only include the plain links into their tweets if they want to share your posts to their own Twitter groups. With this card, however, they can also showcase your post titles, featured images, brief content summaries, and your Twitter account, giving people a detailed impression of your contents. To be honest, this social experience is much better than a simple URL in picking people’s eyes and arousing their interests.

Twitter Card Example

This example is a standard and default card types called Summary Card, including the information of the title, thumbnail, introduction, and the original Twitter attribution. Besides this, there are also some other types focusing on different aspects.

  • For Images – If you want to showcase your images or galleries, you can choose the type of Photo Card or Gallery Card. If you only want to highlight the featured image, the Summary Card with Large Images is a good option.
  • For Apps – The App Card is suitable for displaying the mobile applications along with the legal downloading resources. The Player Card allows people to attach a music player or a video player into their tweets.
  • For Items – The Product Card can showcase all the details of your products or any promoted items.

How to Use It

Making use of this Twitter service is pretty easy. There are only three steps needed in total, including choosing card type, copying and pasting required meta tags, and requesting for approval.

After logging into this Twitter Cards validation page using the Twitter account, you firstly can see 7 card catalogs that are decided based on your needs. Here, we highly suggest the first one if you have no special requests.

card catalogs

Then, you need to have the needed meta tags added to the header.php file of your website. Note that they have to be placed before the last head tag. All the tags can be found from this Twitter markup reference page. You simply need to choose and finish the coding based on your needs.

Next, you need to back to the Card Validator page. Simply click the Validate & Apply tab, and then enter the URL of your webpage for validating. Now, you can know what your Twitter card looks like in the preview section located at the right hand of the whole page. If you are not satisfied with image size, simply make some modifications with the tags of

<meta name="twitter:image:width" content="width in pixels "> 


<meta name="twitter:image:height" content="height in pixels ">

twitter card validator

Below the card preview area, you can also get the sample embed code, which is useful if you have no idea about the format of card meta tags.

sample embed code

The final step is to have your URL approved by Twitter card validator. To do this, simply click the Request Approval button like the image showed in below.

Request Approval

Now, you are required to enter the contact information of yourself including your name, email address, and Twitter username. Besides, the website information is also required including the domain name, website description, the Twitter account of the site, and a sample URL that contains the card markup.

Approval Information

After clicking the Request Approval button with the blue color, you only need to wait for the approval message. This process may take several days, so just be patient. Once you get approved, you can tweet your posts to test whether there is a Twitter Card attached.

Without doubt, this special card is pretty useful to enlarge your influence in the Twitter community. If you are looking for more related tricks, simply go for this page to get some inspirations.