28th November 2014 update:There is a new post with updated code for adding Twitter Cards to your WordPress website - please view the new article at latest Twitter Card articleHow would you like to be able to add Twitter cards markup code to your WordPress website?Twitter cards is a brand new way to add extra content to your Tweets, simply by adding Twitter Card html code to your webpages. So that when someone links to your content in Twitter, a "card" with more information will be attached to the Tweet.
So firstly here are the basic steps involved to add Twitter Card markup to your website:
[highlight class="highlight_yellow" style=""]Step 1.[/highlight]Review the Twitter Card documentation- in this post I'll show you how to add Summary Card to your Tweets. This is the Default card which contains title, description, thumbnail image, and Twitter account attribution.You can read the documentation here.[highlight class="highlight_yellow" style=""]Step 2.[/highlight]Add the required Twitter Meta markup to your page header[php]<meta name="twitter:card" content="summary" /><meta name="twitter:site" content="@ insert-twitter-Account" /><meta name="twitter:creator" content="@ insert-twitter-account-for-page-Author" /><meta name="twitter:url" content="the page url goes here" /><meta name="twitter:title" content="the page title goes here" /><meta name="twitter:description" content="the page excerpt or short description goes here" /><meta name="twitter:image" content="add an image to your card here" />[/php][highlight class="highlight_yellow" style=""]Step 3.[/highlight]Twitter have provided a great tool so that you can check your markup to make sure you've got it right. Add your URL that you wish to validate here[highlight class="highlight_yellow" style=""]Step 4.[/highlight]Request approval for your website from Twitter Cards- simply click on the "Request Approval" button as shown in the image below and fill your details in the form to register your domain. Please note that Twitter must approve the integration- which according to their site takes a couple of weeks.
The "automatic" way to have your Wordpress website pages setup for Twitter Cards -Summary Card
What's the easiest way to add this code to your webpages so that you maximise the potential of Twitter Cards?As each page on your website has its own unique content, you want your Twitter Cards to show different content for each page. But adding this manually each time can be quite time consuming, and also easy to forget to do.The following code will add the required Twitter card markup to your home page, your posts, pages and category. It uses permalinks, excerpts, bloginfo and other Wordpress code to tailor the Twitter cards for the different pages.[tweet-support class="bobb" shortcdtext="Keep this to yourself or share with your friends on Twitter" text="shows how to optimise your Wordpress website for Twitter Cards with code snippets - this is great"]Add the following code to your header.php[php]<?php if ( is_category() ) { $cat = get_query_var('cat'); $metacat= strip_tags(category_description($cat)); $current_page_URL = $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; ?><meta name="twitter:card" content="summary" /><meta name="twitter:site" content="@ CHANGE-ME" /><meta name="twitter:creator" content="@ CHANGE-ME" /><meta name="twitter:url" content="<?php echo esc_url($current_page_URL);?>" /><meta name="twitter:title" content="<?php single_cat_title();?>" /><meta name="twitter:description" content="<?php echo $metacat;?>" /><?php } ?><?php if (is_single() || is_page() ) : if (have_posts() ) : while (have_posts() ) : the_post(); ?><meta name="twitter:description" content="<?php echo get_the_excerpt();?>" /><meta name="twitter:card" content="summary" /><meta name="twitter:site" content="@ CHANGE-ME" /><meta name="twitter:creator" content="@ CHANGE-ME" /><meta name="twitter:url" content="<?php the_permalink();?>" /><meta name="twitter:title" content="<?php the_title();?>" /><?php endwhile; endif; elseif (is_home() ): ?><meta name="twitter:card" content="summary" /><meta name="twitter:site" content="@ CHANGE-ME" /><meta name="twitter:creator" content="@ CHANGE-ME" /><meta name="twitter:url" content="<?php echo home_url();?>" /><meta name="twitter:title" content="<?php echo esc_attr(get_bloginfo('name'));?>" /><meta name="twitter:description" content="<?php bloginfo('description'); ?>" /><meta name="twitter:image:src" content="INSERT-IMAGE-URL" /><?php endif; ?>[/php]Don't forget to add your Twitter handle/ username where it says CHANGE-ME and add an image URL for your Home page Twitter Card where it says INSERT-IMAGE-URL.You might have noticed that I haven't added the markup for the "twitter:image:src" for the posts and pages. I thought that it might be nice to be able to customise this individually for each post using the built in WordPress custom meta data that you find in the post editing screen.Firstly add this to the your childtheme's functions.php file:[php]add_action('wp_head','twitcard_img');function twitcard_img(){ global $post; if (is_single()||is_page()){ if(get_post_meta($post->ID,'twitcard_picture_url',true) != '') echo '<meta name="twitter:image:src" content="'.get_post_meta($post->ID,'twitcard_picture_url',true).'" />'; }}[/php]This defines a new function called "twitcard_img" that extracts the data that you insert into the custom field "twitcard_picture_url" and adds that into the header of your posts and pages inside the content of "twitter:image:src".Now you need to create that custom field. Go into a post or page editing screen. Click on the "Screen Options" and ensure "Custom Fields" is ticked.
Next scroll down to "Custom Fields" and add your new custom field "twitcard_picture_url"
Now when you create posts and pages, add the image URL that you want in your Twitter card into this custom field, and the "twitcard_img" function will auto add it your pages header, so that your Twitter card will display that image.
Then load the URL into the validator and check it out.
So there you have it. Have you started using Twitter Cards already? Be one of the first and get started today.[dtwd-related-posts-sc title="Other tips for you" count=4]
Comments: