echo wp_oembed_get fix

Pure click-bait gold, baby!1

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.2 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));
      } 

Screen Shot of the oembed Twitter URL

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 that3 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.
premature anchor link closing

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.4 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.

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).


1 My wife insisted I add the comma. She claimed it wasn’t possible I really meant a solid gold click-bait baby despite my insistence that I meant exactly that.

2 I really need to sit down and just read the whole codex.

3 Valid in HTML5 and all 50 states and Puerto Rico.

4 Really sad how much I like data attributes.

Comments on this post

  1. Cog.Dog said on September 2, 2017 at 1:56 am

    I use wp_oembed_get extensively on my Daily Blank theme (generalized version of DS 106 Daily create), it is sweet indeed.

    My hunch on the empty link there is something mangled by the twitter embed jquery code. Wild guess. This may be a silly question, but why not put an “Analyze This Tweet” button below it? The div/link overtop seems to change the expected user experience with the tweet (again, I am likely missing the design approach). Also I am not sure where the multiple tweets to analyze are coming in; is that having more than one per post? Or in an archive view?

    With that last bit of differences in how quoted tweets and replies embed, it might lead you down the hole of doing the hitting thr twitter api to find the original tweet??

    Good call on the comma before baby, baby.

    • Tom Woodward said on September 2, 2017 at 9:21 pm

      I just didn’t like the look of lots of buttons and worried people would instinctively click on the tweet so I’d have to prevent that anyway. The view will be a bunch of ‘unclaimed’ tweets in need of analysis. It’ll be something like this but I’ll likely double the columns in desktop width.

      The issue was mainly the weird behavior bothered me on some personal level. I agree, must be something in the twitter js.

      I took a look at the Twitter api and it seems like it’d be more hassle than it’s worth- especially when I figured it might be a retweet of a retweet of a quote tweet . . . Their focus, at least that I saw, was on going from the og tweet to the retweets rather than from the retweet to a the original.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL