oEmbedding twitter updates with Java and WordPress

December 20, 2011 by Michael

I’m really a big fan of oEmbed. My project Daily Fratze acts as oEmbed provider and consumer for example.

Now I’m really happy that twitter announced that it now acts as an oembed provider:

(I’d even be happier if twitter would autodiscover providers 😉 )

To use this in a Java based application you can use my java-oembed lib with the following configuration:

Oembed oembed = new OembedBuilder(this.httpClient)
	.withCacheManager(cacheManager)
	.withBaseUri("http://yourproject")
	.withConsumer("yourproject")
	.withProviders(					
			new OembedProviderBuilder()
				.withName("twitter")
				.withFormat("json")
				.withMaxWidth(480)
				.withEndpoint("https://api.twitter.com/1/statuses/oembed.%{format}")
				.withUrlSchemes("https?://twitter.com/#!/[a-z0-9_]{1,20}/status/\\d+")
				.build()
	 )
	.withHandlers(new CommonHandler("twitter"))
	.build();

The handler looks like this:

import org.apache.commons.lang.StringEscapeUtils;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
 
import ac.simons.oembed.OembedResponse;
import ac.simons.oembed.OembedResponseHandler;
 
 
public class CommonHandler implements OembedResponseHandler {
	private String handlerFor;
 
	public CommonHandler(String handlerFor) {
		this.handlerFor = handlerFor;
	}
 
	@Override
	public String getFor() {
		return handlerFor;
	}
 
	@Override
	public void handle(Document document, Element a, OembedResponse response) {
		final StringBuilder hlp = new StringBuilder();
 
		final String title = StringEscapeUtils.escapeHtml(response.getTitle());
		if(response.getType().equalsIgnoreCase("video") || response.getType().equalsIgnoreCase("rich")) {
			hlp.append("<span style=\"display:block; text-align:center;\">");
			hlp.append(response.getHtml());
			hlp.append("</span>");
		} else if(response.getType().equalsIgnoreCase("photo")) {			
			hlp.append("<span style=\"display:block; text-align:center;\">");			
			hlp.append(String.format("<img src=\"%s\" alt=\"%s\" title=\"%s\" style=\"width: %d; height: %d;\" />", response.getUrl(), title, title, response.getWidth(), response.getHeight()));			
			hlp.append("</span>");
		}
 
		a.before(hlp.toString());
		a.remove();		
	}
}

Be careful to get the latest release, twitter has some real large values for cache ages and i needed to update a member from int to long.

To have WordPress automatically embed statusupdates, add the following line to the “functions.php” of your current theme. Create the file if it isn’t available in the root folder of your theme:

wp_oembed_add_provider('#https?://twitter.com/\#!/[a-z0-9_]{1,20}/status/\d+#i', 'https://api.twitter.com/1/statuses/oembed.json', true);

Whenever you add the plain link (whithout an anchor tag) to a statusupdate on a single line in a post, it will be embedded like the example above.

Update

If you are more into plugins, just download my Enable Twitter oEmbed WordPress plugin, install it and you’re good to go.

An alternative to oEmbed for Twitter was the Twitter Blackbird Pie Plugin for WordPress, but why adding more stuff if everything else is already there? My plugin is much more lightweight.

Embedding me looks like this, by the way:

michael | DailyFratze.de ...täglich frisch!

the picture will always show my latest update on daily fratze.

As this is probably the last post here for this year, i wish every visitor some nice christmas holidays!

No comments yet

Post a Comment

Your email is never published nor shared. Required fields are marked *