How to Setup & Validate Photo Cards for Twitter Cards Meta

Posted OnMay 19, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Twitter Cards Meta plugin, we will show you how to set up and validate the Photo Card.

The Photo Card puts the image front and center in the Tweet. Clicking on the photo expands it to a larger view.

On twitter.com and mobile clients, the image will display below the tweet text.

For this example, a Flickr Account was created and referenced in the Meta Tags shown below.

Prior to continuing, perform the following steps:

  • Navigate to Settings -> Twitter Card Meta and make sure the Twitter Card Selection Type is set to Photo Cards.
  • If you do not have a Flickr Account, one will need to be created.
  • Note: we strongly recommend creating a child theme for this

    Step 1) Login to the WordPress Dashboard.

    Step 2) From the left-hand sidebar of the Dashboard, navigate to Appearance -> Editor.

    Step 3) From the right-hand sidebar, locate and click on the header.php file.

    Step 4) In the main editor, you should now see the contents of the header.php file.

    Step 5) Locate the <head> tag, and add in the following lines of code (replace with your own information):

    <meta name="twitter:card" content="photo" />
    <meta name="twitter:site" content="@ecakesonline" />
    <meta name="twitter:title" content="Mountain sunset" />
    <meta name="twitter:description" content="Explore Reza-Sina's photos on Flickr. Reza-Sina has uploaded 113 photos to Flickr." />
    <meta name="twitter:image" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" />
    <meta name="twitter:url" content="https://www.flickr.com/groups/2730013@N24/" />

    Reference Guide

    Card Property Description Required
    twitter:card Should be set to a value of photo Yes
    twitter:site The Twitter @username the card should be attributed to. No
    twitter:title Title should be concise and will be truncated at 70 characters. No
    twitter:image A URL to the image representing the content. Image must be less than 1MB in size. Yes
    twitter:image:width Providing width in pixels helps us more accurately preserve the aspect ratio of the image when resizing. No
    twitter:image:height Providing height in px helps us more accurately preserve the aspect ratio of the image when resizing. No

    Step 6) Click the Update File button to save the changes.

    km-twitter-sample-photo-02aa

    Validating the Summary Card

    Step 7) Once the tags shown above have been added, you can submit your Card for approval using the Twitter Card Validator tool.

    Step 8) On the Twitter Card Validator page, enter your Twitter URL in the textbox.

    Step 9) Click the Preview Card button.

    km-twitter-sample-03a

    Step 10) If successful, a page similar to the one shown below will display.

    km-twitter-sample-10a

    Step 11) Click the View on Web hyperlink.

    km-twitter-sample-11a

    You will receive an email once Twitter approves your request.
    This approval can take anywhere from 24 – 72 hours.

    This concludes our guide of the Twitter Cards Meta plugin.

     


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Send this to friend