echo wp_oembed_get fix

Pure click-bait gold, baby!¹

You know I’m focused on those high-traffic titles.

And now on to the show . . .

I’m doing a site for the esteemed Jon Becker’s school law class. The goal is to take tweets that exemplify really bad legal choices by public school administrators. They even have a hashtag – #schoollawwtf.

Since we’re taking tweets into WordPress for further analysis we end up with some weird constraints. I can’t rely on useful titles if we want to automate this as the tweet content might contain any number of things and the regex to try to purify it wouldn’t be worth the hassle.

New content wouldn’t have any body text either because it’s just a tweet. Granted, I could duplicate that text in the body but I didn’t really see much point in that.

I opted to stick the tweet URL in a custom field. That soon led me to the handy wp_oembed_get function which was new to me.² That worked very nicely for display on single posts (screenshot and code snippet below).

 if (get_post_meta(get_the_ID(), 'tweet', true)) {
        echo wp_oembed_get(get_post_meta(get_the_ID(), 'tweet', true));
      } 

Where it ended up failing me was when we needed to display a bunch of tweets in need of analysis. All I had were the Twitter oEmbed element to show and clicking on them would take you to Twitter-land rather than to thee blog post like I needed. No big deal, I figured I’d throw a div over the top of the tweet, put my a link around that³ and be good to go. That’s not quite what ended up happening.

It’s a bit hard to explain but no matter how many different paths I tried the a link would close with nothing in it. You can see in the screenshot below. I end up with two empty a links with nothing to click on. Strange and really frustrating. I tried many, many other combinations . . . pulled things into functions, tried printf, wrote all the HTML together first, etc. etc. Nothing worked.

I finally decided to give up on the php route and do it in javascript. This ended up being almost painfully easy.

The div was already over the top so I just needed to turn it into a link that went where I desired. For me, that usually means going the data attribute route.⁴ Easiest thing I had handy was the post ID.

echo '<div class="wtf-tweet-holder" data-link="' . get_the_ID() . '">';

Now to for the javascript to make them clickable.

function twitterLinks (){
	var url = WPURLS.siteurl + '/?p='; //sets a nice base URL based on localizing the script in the functions.php 
	jQuery(".wtf-tweet-holder").click(function() { //get all the divs with class .wtf-tweet-holder
		window.location = url + jQuery(this).data('link');//create the url using the data-link at the ID
		});
	}

One of the other useful things I found out in this process was that Twitter treats retweets and quote tweets very differently than replies.

This is a quote tweet. On the embed, you essentially lose the quoted tweet entirely which sucks. It’s there on Twitter’s timeline but not on the embed.

https://twitter.com/jonbecker/status/713147006869483520

While a conversation (replying to a Tweet and using our hashtag) gets a conversation you can embed like so (but which looks much odder on Twitter’s timeline).

https://twitter.com/jonbecker/status/902947719341322252