Syncing LinkedIn and Twitter Accounts No More Allowed, Implement Twitter Cards on WordPress

Syncing Your LinkedIn and Twitter Accounts Is No More Allowed, Updated Process to Sync Updates on Both; How to Implement Twitter Cards on Self-hosted WordPress. Update: W3C valid Twitter Cards meta tags.

Update 04/03: The post is now updated with valid W3C Twitter Cards meta tags:

How to add Twitter Cards meta tags to WordPress

For those who sync your LinkedIn Profile page and Twitter accounts to share your professional content, knowledge and expertise - note, your tweets will no longer be displayed on LinkedIn starting later today.

"If you had previously synced your LinkedIn and Twitter accounts, and selected the option to share Tweets on LinkedIn, those Tweets generated from Twitter will no longer appear on LinkedIn," posted Rryan Roslansky on LinkedIn.

"Moving forward, you will still be able to share your updates with your Twitter audience by posting them on LinkedIn," Roslansky stated. (see the steps under this post).

As Twitter's Michael Sippey, in a blog post posted that they are increasingly focused on "providing the core Twitter consumption experience through a consistent set of products and tools."

"Back in March of 2011, my colleague Ryan Sarver said that developers should not "build client apps that mimic or reproduce the mainstream Twitter consumer client experience." That guidance continues to apply as much as ever today. Related to that, we've already begun to more thoroughly enforce our Developer Rules of the Road with partners, for example with branding, and in the coming weeks, we will be introducing stricter guidelines around how the Twitter API is used."

"…Ultimately, we want to make sure that the Twitter experience is straightforward and easy to understand -- whether you're on Twitter.com or elsewhere on the web," he said.

Twitter's move is inspired with the success of Twitter Card that the company had introduced about two weeks back -- and gives developers and publishers a way to tell richer stories on Twitter, directly within their expanded tweets and drive traffic back to their sites.

In other words, ""Twitter cards" make it possible to attach media experiences to Tweets that link to contents by simply adding a few lines of HTML to webpages, and users who Tweet links to the content will have a "card" added to the Tweet that's visible to all of their followers."

Twitter Card's HTML markup is same as Facebkook 's Open Graph and Google+, to use it on your blog, just fill out this form, and choose the implementaion mentod of the meta tags from as mentioned under:

If you've already implemented open graph meta tags -- just add the first three to ng Facebook

<meta property="twitter:card" content="summary"/> 
<meta property="twitter:site" content="@diTii"/> 
<meta property="twitter:creator" content="@diTii"/>
<meta property="twitter:url" content="http://example.com"/> 
<meta property="twitter:title" content="Example Post"/> 
<meta property="twitter:description" content="This is an example post"/> 
<meta property="twitter:image" content="http://example.com/image.png"/> 
<meta property="twitter:image:width" content="400"/> 
<meta property="twitter:image:height" content="300"/>

First, up, since WordPress doesn't have a Twitter User ID field in Users profile page. So to retrieve a post author's Twitter ID, we need to add an option. Add the follwing code in the functions.php file. Once added, go to your WordPress profile page, add your Twitter ID in the new Twitter Contact Info field, and save changes.

function add_twitter_contactmethod( $contactmethods ) {
  // Add Twitter
  if ( !isset( $contactmethods['twitter'] ) )
    $contactmethods['twitter'] = 'Twitter';

  return $contactmethods;
}
add_filter( 'user_contactmethods', 'add_twitter_contactmethod', 10, 1 );

To add the above meta tags to your self-hosted WordPress blog, you can either use the code right under, or the second below -- as per your convinence:

Open your active theme's functions.php file in a text editor, and paste the following code:

//Add Twitter Cards Meta Info
function add_twitter_card_info() {
	global $post;
	if ( !is_singular())
		return;
	echo '<meta property="twitter:card" content="summary"/>';
	echo '<meta property="twitter:url" content="' . get_permalink() . '"/>';
	echo '<meta property="twitter:title" content="' . get_the_title() . '"/>';
	echo '<meta property="twitter:description" content="' . get_the_excerpt() . '"/>';
	echo '<meta property="twitter:site" content="diTii"/>'; //optional: username of website
	echo '<meta property="twitter:creator" content="diTii"/>'; //optional: username of content creator
	if(!has_post_thumbnail( $post->ID )) { //use a default image if no featured image set
		$default_image="http://example.com/image.jpg"; //replace this with a default image
		echo '<meta property="twitter:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="twitter:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "\n";
}
add_action( 'wp_head', 'add_twitter_card_info');

Or, open the header.php file and add the following code below inside head tags (beofre closing head tag ):

< ?php if(is_single()||is_page()){$wppost_url="get_permalink();$wppost_title=get_the_title();$wppost_desc=get_the_excerpt();$wppost_image=wp_get_attachment_image_src(get_post_thumbnail_id($post-">ID),medium);$wppost_img=$wppost_image[0];if(!$wppost_img){$wppost_img='http://example.com/image.jpg';}$twitter_user=str_replace('@','',get_the_author_meta('twitter'));?>

<meta property="twitter:card" content="summary" />
<meta property="twitter:url" content="<?php echo $wppost_url;?/>" />
<meta property="twitter:title" content="<?php echo $wppost_title;?/>" />
<meta property="twitter:description" content="<?php echo $wppost_desc;?/>" />
<meta property="twitter:image" content="<?php echo $wppost_image;?/>" />
<meta property="twitter:site" content="@diTii" />
< ? if($twitter_user){?>
<meta property="twitter:creator" content="@<?php echo $twitter_user;?/>" />
< ? }}?>

You can read more about Twitter Card meta tags here.

Moving back to how to continue to share updates on both LinkedIn and Twitter?

Just initiate the conversation on LinkedIn. Simply compose your update, check the box with the Twitter icon, and click "Share." "This will automatically push your update to both your LinkedIn connections and your Twitter followers just as you've been able to do previously," explains LinkedIn's Roslansky.