oEmbed – Mostly Harmless

December 29, 2015

My oEmbed discovery links work (It was me)

I thought I broke my oEmbed discovery links but I had a more fundamental problem. I had broken fancy permalinks on my nginx configuration for a while and didn’t realize it.

I revisited the Nginx Codex page and did a stare and compare of my configuration and the examples there. I am sure I read that page in the past and my mistake was the “try_files” line.

Here’s what I had for try_files.

location / {
	try_files $uri $uri/ /index.php;
}

Here’s what that line should have read.

location / {
	try_files $uri $uri/ /index.php?$args;
}

See the “?$args” part? With that in place the non-post URLs work. The permalinks worked fine but things that were not to a post or page didn’t. Due to my fancy permalink settings my oEmbed discovery links had this format.

https://blog.dembowski.net/wp-json/oembed/1.0/embed?url=urlencoded-data-here and that wasn’t being handled by my nginx configuration.

My plugin worked because I was replacing the fancy URLs with the regular non-fancy “?rest_route” version which nginx passed along to my WordPress installation just fine.

https://blog.dembowski.net/?rest_route=%2Foembed%2F1.0%2Fembed&url=urlencoded-data-here

This may have also broken other features as well. I wonder what else I’m missing? I should check all the things. 😉

December 27, 2015

oEmbed not working (I’m convinced it’s me)

One of the new WordPress 4.4 features is the ability for your installation to become an oEmbed provider. In plain English you can paste your post URL and get a result as if you were embedding a YouTube URL.

I could not get it to work for me. No way, no how. The json and XML discovery links were there in the post HTML but those links came back with “What? What? No. Go away, you’re bothering kid.”

It should have come back with a valid output and it did. It was a result, just not a functioning one.

For example, this post (which I’m not embedding) should provide via this link usable information. It doesn’t. I get this.

<link rel="alternate" type="application/json+oembed" href="https://blog.dembowski.net/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fblog.dembowski.net%2F2015%2Fserver-admins-love-wp-cli%2F" />

That link results in this.

{"code":"rest_missing_callback_param","message":"Missing parameter(s): url","data":{"status":400,"params":["url"]}}

It doesn’t contain any useful data except to reply with “What? What? What?”

It should output this.

{"version":"1.0","provider_name":"Mostly Harmless","provider_url":"https:\/\/blog.dembowski.net","author_name":"Jan Dembowski","author_url":"https:\/\/blog.dembowski.net\/author\/jan\/","title":"Server admins love WP-CLI","type":"rich","width":600,"height":338,"html":"</pre>
<blockquote class="\&quot;wp-embedded-content\&quot;">
<a href="\&quot;https:\/\/blog.dembowski.net\/2015\/server-admins-love-wp-cli\/\&quot;">Server admins love WP-CLI<\/a><\/blockquote>\n<script type="text\/javascript">// <![CDATA[
\n<!--\/\/--><![CDATA[\/\/><!--\n\t\t!function(a,b){\"use strict\";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf(\"MSIE 10\"),h=!!navigator.userAgent.match(\/Trident.*rv:11\\.\/),i=b.querySelectorAll(\"iframe.wp-embedded-content\"),j=b.querySelectorAll(\"blockquote.wp-embedded-content\");for(c=0;c<j.length;c++)j[c].style.display=\"none\";for(c=0;c<i.length;c++)if(d=i[c],d.style.display=\"\",!d.getAttribute(\"data-secret\")){if(f=Math.random().toString(36).substr(2,10),d.src+=\"#?secret=\"+f,d.setAttribute(\"data-secret\",f),g||h)a=d.cloneNode(!0),a.removeAttribute(\"security\"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!\/[^a-zA-Z0-9]\/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret=\"'+d.secret+'\"]'),k=b.querySelectorAll('blockquote[data-secret=\"'+d.secret+'\"]');for(e=0;e<k.length;e++)k[e].style.display=\"none\";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.style.display=\"\",\"height\"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(200>~~g)g=200;f.height=g}if(\"link\"===d.message)if(h=b.createElement(\"a\"),i=b.createElement(\"a\"),h.href=f.getAttribute(\"src\"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener(\"message\",a.wp.receiveEmbedMessage,!1),b.addEventListener(\"DOMContentLoaded\",c,!1),a.addEventListener(\"load\",c,!1)}(window,document);\n\/\/--><!]]>\n<\/script><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/blog.dembowski.net\/2015\/server-admins-love-wp-cli\/embed\/\" width=\"600\" height=\"338\" title=\"Embedded WordPress Post\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe>","thumbnail_url":"https:\/\/blog.dembowski.net\/wp-content\/uploads\/sites\/2\/2015\/12\/wp-cli-rocks.png","thumbnail_width":600,"thumbnail_height":135}

Which is unreadable to you and I but to something looking to oEmbed your post it will look like this.

Server admins love WP-CLI

Nice huh? All neat in an iframe and easily embeddable. The output is customizable too and I plan to do that on my photo blog.

The oEmbed discovery links should just work but on my installations it doesn’t. I tried Apache2, nginx, clean installation with zero plugins and the Twenty Fifteen theme. Different servers too. I always got the wrong output and could not get oEmbed working.

During my troubleshooting I found a different URL that worked consistently for me. It’s the same information but with a filter I replaced the default output with one that worked for me.

Here’s the plugin code I used. The oembed_discovery_links is filterable (filters are cool) and I toss out the old links and replace them with my own.

	<?php

	/*
	Plugin Name: Fix oembed_discovery_links output
	Description: Modify the oembed discovery links in horrible ways
	Version: 1.0
	Author: Jan Dembowski
	Author URI: https://blog.dembowski.net/
	*/

	add_filter( 'oembed_discovery_links', 'mh_oembed_add_discovery_links' );

	function mh_oembed_add_discovery_links( $output ) {

	$mh_newencoded = urlencode( home_url() . '/?p=' . get_the_ID() );

	$output = '<link rel="alternate" type="application/json+oembed" href="' . esc_url( home_url() . '/?rest_route=%2Foembed%2F1.0%2Fembed&url=' . $mh_newencoded ) . '" />' . "\n";
	if ( class_exists( 'SimpleXMLElement' ) ) {
	$output .= '<link rel="alternate" type="text/xml+oembed" href="' . esc_url( home_url() . '/?rest_route=%2Foembed%2F1.0%2Fembed&url=' . $mh_newencoded ) . '" />' . "\n";
	}

	return $output;
	}

view raw

fix-discovery-links.php

hosted with ❤ by GitHub

This works for me but I do not like this solution.

The problem I have is that the normal links are not being replied to correctly via my WordPress installation. I don’t know why the default discovery links are not working. It bothers me, it really does. 😉

I’m convinced that there is something I’m doing wrong in my setup. Once I figure it out I’ll I can remove this plugin and I’ll post what I was missing.

July 4, 2012

Or center embedded tweets with just CSS

After my earlier post on “Centering embedded tweets in WordPress” I’d gotten a reply from Ipstenu and Otto on Twitter.

@jan_dembowski You can override it with CSS and !important. I did on a bbPress.

— ipstenu ((Mika 実佳)) (@Ipstenu) July 4, 2012

Customizing how tweets are displayed is not a new problem. 😉

This got me taking a second look at the CSS of an embedded tweet. With Firebug you can inspect just about any items properties and I found the rule quickly.

I’m still picking up CSS knowledge all the time and I always forget about !important.

That tag lets you override rules even when it the normal CSS should get precedence. Which is why when I tried this in CSS previously it didn’t work for me, the rule I added was missing that tag. Read more

July 4, 2012

Centering embedded tweets in WordPress

Update: While the below solution is fun and works, it’s a little heavy handed code-wise. It’s easier to modify the presentation of the tweet using CSS which I explain in the next post.

A better solution is probably documented somewhere, but this worked for me and more importantly I had fun.

I was reading a blog post and noticed that the embedded tweets there were centered neatly and were not the same width as my own embedded tweets. The ones that I had inserted were left justified and had a 550px width.

I’d never liked the styling of my tweets, but all I was doing was pasting the tweet URL into the editor. I wasn’t pasting in the code from Twitter, WordPress was retrieving it for me via oEmbed.

I looked at the source of that page and noticed that the other blog post had added an additional CSS class to the tweet called tw-align-center and the hard-coded width=”550″ was removed.

That’s not surprising because when you visit Twitter’s page on embedding tweets, you can see the options for alignment. But how to do it in WordPress?

December 20, 2011

Fun with oEmbed and Twitter

This tweet is being displayed using oEmbed between WordPress and Twitter. This capability was added a few minutes ago after I pasted Otto’s code snippet into my theme’s functions.php file:

So can an oEmbed'ed tweet also embed the Youtube video?http://t.co/IbyDjsdf

— Jan Dembowski (@jan_dembowski) December 21, 2011

That’s pretty remarkable. I’ve embedded a tweet that has an embedded Youtube video in it. I didn’t even bother to wrap the URL in the [ embed] … [ /embed] shortcode, I just pasted in the link to that tweet.

That’s very cool! It shouldn’t be long before this is put into a plugin; I put it into my theme’s functions.php because I’m used to poking in there.

Interestingly enough, when the Twitter Blackbird Pie plugin is activated it overrides the oEmbed output and puts the tweet into that nice format that they use. For now I’ll use the oEmbed option.

Tag: oEmbed (page 1 of 1)

My oEmbed discovery links work (It was me)

Like this:

oEmbed not working (I’m convinced it’s me)

Like this:

Or center embedded tweets with just CSS

Like this:

Centering embedded tweets in WordPress

Update: While the below solution is fun and works, it’s a little heavy handed code-wise. It’s easier to modify the presentation of the tweet using CSS which I explain in the next post.

Like this:

Fun with oEmbed and Twitter

Like this:

Subscribe to Blog via Email

Search

Jan Dembowski