How can I implement Twitter Cards code on my landing page?

Twitter Cards are tweets to which you can attach rich photos, videos and media experience to drive traffic to your landing page.

In order to do this, before you share your landing page on Twitter, you will need to add a code generated by Twitter for the type of card you want.

So, to start out, you will first need to visit the Twitter Cards Overview page. At the bottom of the page you will find the "Get Started in 5 simple steps" section.

Start with step 1 and choose the type of card you will need. You will see that you have 4 types of cards from which to choose.

For this tutorial we will go with the first option - Summary Card.

On the summary card page you will have to scroll down the page a bit and copy the code from the section "Sample Code":

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="" />

This code you will need to add in your Instapage landing page under HTML/CSS > Head.

image of the HTML/CSS and Javascript options in the settings menu

Now you will need to change the content from the code with your own content.image of the HTML section

You can find more about the type of content you need to add there under the subtitle "Reference".

To add the image URL you can also use a Dropbox share link but make sure you replace the "www." in the link with "dl.".

Run the URL through the validator tool to test. If you are working with a Player Card, request approval for whitelisting. All other Cards do not need whitelisting.image of the card validator tool

After testing in the validator or approval of your Player Card, Tweet the URL and see the Card appear below your Tweet in the details view.