Saturday, November 9, 2013

Twitter Card for Blogger & Wordpress

On Twitter, the visual experience associated with the sharing of links to sites or articles written on the sites was until now limited to the mere publication of the link, very often abbreviated, followed by a text message customized by the user who shares the tweet. However, the strong competition between different social networks, Twitter has prompted developers to create a new form of tweets, still on trial, said Twitter Cards. Let's find out what they are and how we can use them to improve our web presence.

When we'll post a link on Twitter, this is shown with an abstract of the text in the article and the title, the more links that refer to the article on the site. The Twitter Cards improve the visual experience of the post shared by adding information retrieved from the article page or from the homepage of the site.
Twitter Cards
In this way we can enrich our posts published on Twitter displaying information processed by or on our blog details and photos on.
The display mode, but also the technique used, is similar to that of Facebook, and makes use of metatags inserted directly into the target page. In this way does not require any additional work to those who post the link to our site on Twitter.
The biggest advantage of having Twitter followers Cards is the increase in interest in the content attributors. Often our followers ritwittano our posts or posting links to our site without an explicit reference to the creator. With Twitter Cards will always be a box with additional information to be associated with us directly on the article page. It also helps to save some character between 140 available from twitter for posts.
Now that we have analyzed what are the Twitter Cards, we are ready to implement them on our blog in wordpress.

Add Twitter Cards in Blogger

Search for </head> 

and paste the below code just above that. Replace the TWITTERID with yours.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <b:if cond='data:blog.metaDescription'>
        <meta content='summary' name='twitter:card'/>
        <meta content='@TWITTERID' name='twitter:site'/>
        <meta content='@TWITTERID' name='twitter:creator'/>
        <meta expr:content='data:blog.pageName' name='twitter:title'/>
        <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
        <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
      </b:if>
    </b:if>
</b:if>

Add Twitter Cards in Wordpress

There are two ways to add Twitter Cards on our blog on WordPress

Method 1: We use the WordPress SEO plugin by Yoast

The plugin Wordpress SEO by Yoast is a great plugin for SEO optimization of our site. Among the many features provided by the team Yoast there is also integration with Twitter Cards. To configure it, after you have installed the plugin in the left column click SEO> Social
At the bottom of the configuration page you want to insert the default account used to post on twitter.However, if the user settings are present the information on their twitter account, the plugin will use them to create a more appropriate description for the Cards associated with the Twitter post on Twitter.

Method 2: hardcode directly into the template Wordpress

Open the file header.php in the folder of your wordpress template and insert the following lines of code before the closing tag of the head
<? Php
# Twitter cards hack
if (is_single () | | is_page ()) {
  $ Twitter_url get_permalink = ();
 $ Twitter_title get_the_title = ();
 $ Twitter_desc get_the_excerpt = ();
   $ Twitter_thumbs = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), full);
    $ $ Twitter_thumbs twitter_thumb = [0];
      if ($ twitter_thumb) {
      $ Twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $ Twitter_name = str_replace ('@','', get_the_author_meta ('twitter'));
?>
<meta name="twitter:card" value="summary" />
<Meta name = "twitter: url" value = " "/>
<Meta name = "twitter: image" value = " "/>
<Meta name = "twitter: site" value = "href="http://twitter.com/agrumiro" <a target="_blank" rel="nofollow"> @ agrumiro </ a>" />
<?
  if ($ twitter_name) {
?>
<Meta name = "twitter: creator" value = "@ <? Php echo $ twitter_name;?>" />
<?
  }
}
?>
If you are not familiar with php I recommend using method 1.

We check our Twitter Card

Twitter Cards apply for functionality through this formMeanwhile, we can test the result using the special tool provided by the team of twitter and available here .
Post a Comment

~