Twitter Cards for WordPress?

znmeb · 2012-06-14T23:03:48.000Z

I love the idea of Twitter Cards, but my website is built in WordPress. Is there a way I can get Twitter Cards integrated in WordPress without having to descend into HTML, CSS, JavaScript or PHP code?

Teratoma · 2012-06-15T01:18:38.000Z

From what I could glean from the documentation, it looks to me like something that could be made to work as a WP plugin using php for the dynamic/variable elements.

I could be wrong (I don’t understand code well enough to say for sure) but I imagine it won’t be long before someone creates a plugin to accommodate your (and my) needs.

znmeb · 2012-06-15T04:31:15.000Z

Yes, typically within a day or so of Twitter announcing something like this, WordPress plugins get created. But I think Twitter is big enough and WordPress is popular enough that Twitter could actually develop said plugin, test it, and release it with the appropriate license concurrently with doing the server-side development and testing.

I don’t mind waiting a couple of days for the WordPress community to get around to this, but my experience has been less than satisfactory with WordPress plugins that interface with Twitter. The early ones tend to be quick hacks and the later ones tend to be overly complex.

Teratoma · 2012-06-15T05:06:04.000Z

I know what you mean, I’ve experimented with many of them myself. This really does appear to be something simple though. Some PHP in the head section that could format the dynamic content from the posts/pages to meet the Twitter card specs doesn’t sound too complicated to me.

I also agree with you that Twitter should develop the plugin themselves. I’ve been wanting something like this for a while, waiting patiently, so reading about this development is good news - even if I’ll have to wait a little longer to use it myself.

Teratoma · 2012-06-15T06:30:42.000Z

After looking at the required coding, I would venture to say this simpler than both of us are thinking. The Twitter API will simply look for the required meta tags in the tweeted URL. There are many plugins already available that allow you to add meta data to any post or page.

A plugin that could automatically generate these tags in a customizable format may already exist, but if not, writing one that could pull data from your post and/or provide ‘default’ input formatted specifically for Twitter would be VERY simple.

The only way that this wouldn’t be already WP-ready is if the tags you can add to WP pages/posts show up in a place other than where Twitter wants them. This may not be an issue though - this area is just a bit beyond my level of comprehension so far.

Anyway, I have attempted to add the tags to one of my posts, and filled out the form and got a message saying I’d be contacted “when Twitter decided to add more partners” or something, so this is pretty much moot until further developments but really, I think that’s all there is to it!

artesea · 2012-06-15T06:41:37.000Z

It’s pretty easy, already have a plugin installed for the Facebook Open Graphs. If I actually had any free time I would build it myself, but at the moment I’ll just end up tweaking the header file of the template.

Teratoma · 2012-06-15T06:56:37.000Z

@artesea maybe you can tell us then: is the template header the ONLY place that the Twitter API will look for the tags, or does it not matter? Can they be anywhere in the page generated by the URL in the tweet?

Tweaking the header file is not a solution if you want people to be able to tweet multiple, specific posts or pics and have the expanded data be relevant to those posts or pics. Unless there’s something I’m missing?

artesea · 2012-06-15T07:07:16.000Z

Meta tags should only appear in between the head tags at the top of the page.
You should have only one card per url which should be the full article. You might have something in place for the homepage, but then it’s not really in the spirit of what you would expect when on the twitter website.

Teratoma · 2012-06-15T07:20:01.000Z

Yeah, I can see now that that’s simply where they go, and where plugins put them anyway. I just installed the HiFi plugin and added the necessary tags for an image card and inspected the page with Firebug and yep, there they were, right in the HEAD section!

So I’m confident that someone will come up with a nice plugin that will add forms/options to the admin area. Hopefully something that will pull relevant data from the post/page and/or fill the fields with ‘default’ info that you can edit. This can be done before Twitter actually rolls out the feature.

I wonder when the ETA for that is.

artesea · 2012-06-15T07:55:00.000Z

The following is a quick hack to my header.php in the template file, just above the closing tag.

<?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_thumb = $twitter_thumbs[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')); ?> <? if($twitter_name) { ?> <? } } ?>

The code “works” in that I’ve got what I expect in my generated source, but I’ve not escaped any of the output so their might be examples where it doesn’t.

The line $twitter_name = str_replace(’@’, ‘’, get_the_author_meta(‘twitter’)); uses a custom variable I already had for my authors (very large team blog), if you are a single author site just replace the right hand side with your username (without the @), eg $twitter_name = artesea

artesea · 2012-06-15T07:58:29.000Z

I’ve just posted some code, but it’s been placed in to a moderation queue, I’ve noticed a small typo which needs to be edited, but might not be around to change it once live. The line with
echo $twitter_name; ?>
should have
" />
at the end

Teratoma · 2012-06-15T17:58:11.000Z

This is excellent, Ryan; thanks! This is exactly what I was talking about in my second reply here.

Though I’m having trouble adapting it to the photo card protocol, which will be my primary use of this feature. I suppose it would be easy enough to put all of your code except the Twitter:image line in my themes header, but use one of the meta plugins to customize that line as I post.

Which brings me to my next question for you: If I leave all of this in my theme’s header, can I “override” the values by using one of the aforementioned plugins in an individual post?

For example, can I make the Twitter:image line point to a default image (such as a logo), but use the HiFi plugin (at the posting level) to point it to a different image? Will the latter override the former, or will it cause a conflict?

Thanks for your help, it’s much appreciated!

niall · 2012-06-16T01:30:49.000Z

I wrote a WordPress plugin based on my PHP library for Twitter Cards. On GitHub now, WordPress plugin repository soon. https://github.com/niallkennedy/twitter-cards

You will want to tap into the twitter_card_properties filter to add Twitter usernames, etc. May be more sexy ways in the future such as usermeta or settings.

znmeb · 2012-06-16T02:46:08.000Z

Thanks! I’ll check it out!!

Teratoma · 2012-06-16T19:31:10.000Z

@niall - having trouble installing. Tried a few things, manually uploaded the files, tried zipping them and WP claims ‘no valid plugins found’

Anxious to check it out though!

foxmask · 2012-06-16T20:22:53.000Z

Works great !

ajkohn · 2012-06-17T17:21:41.000Z

What I’m struggling with is how exactly to test whether the code I’ve got works or not? I’ve done my own hack which isn’t as elegant as @artesea but I think it’ll work.

But is there a Twitter testing tool like the Facebook Linter and Google Rich Snippets Testing Tool to tell us whether we’ve got it right or not?

Teratoma · 2012-06-17T17:44:12.000Z

@ajkohn you can inspect the page with the firebug plugin or something similar, and if you can see your tags - and they’re formatted the way Twitter needs them in the documentation, you can be sure they’ll work.

ajkohn · 2012-06-17T20:12:07.000Z

Yes @Teratoma I’ve got Chrome Dev tools to inspect and the hack I have in place delivers the content to the page with the right markup.

But if you’re hoping for Twitter to use the fallback tags, well, it would just be nice to have a tool to ensure that Twitter was seeing things ‘right’.

Mind you, the Google RSTT is often broken or throws false positives and negatives but I’d feel better having something to test against.

Also, is it just me or is the link to apply no longer live and can anyone now have the code in place and get a rich presentation?

Teratoma · 2012-06-17T21:13:12.000Z

I know what you mean - I’m waiting as patiently as I can for them to roll the feature out.

On the cards announcement page, there is code showing where the link to the form had been. They had indicated before that site owners needed to be ‘partners’ to have their domains whitelisted. I’m hoping it’s just an open service now.