oEmbed allows a service (such as YouTube, or Instagram) to be queried in a standard way, and to return markup representing the resource. Embedding a YouTube video this way does what you’d expect – an embed of the video. Embedding Instagram embeds the image in an Instagram frame.

Before…

After…

In WordPress, all of this happens without the content author having to do anything complex – just paste in the URL of the content they want to embed into their post, and WordPress does the rest. We wanted to reproduce those features, and ease of use in our project, which isn’t WordPress, but based on the Laravel framework.

There are however plenty of libraries that you can use to do the heavy lifting – particularly embed/embed:

This lets you simply pass in a URL and get back all sorts of information, including the title, image, and embed code so you can use it how you like. This allowed us to get a proof of concept up and running in our project pretty quickly. However – everything was being embedded in realtime, with oEmbed calls being made to embed resources every time we loaded a page.

To solve this, we created a bridge between Laravel’s cache system and the embed library such that we can load an embed once, and cache the embed code produced, and just re-use that, decreasing load on external services, and increasing load times.

Usage, is simple you just use it as you would embed/embed. If the data is in the cache it will come from there, otherwise it will be fetched and cached automatically.

Happy embedding!

The post Using oEmbed resources in Laravel appeared first on Lee Willis.

So, I’ve also now published a plugin that will let you embed plugin summaries from WordPress.org into your posts and pages just by pasting in the URL.

Check it out here:

The post Easily embed WordPress.org plugin details into your posts appeared first on Lee Willis.

This post is just a quick walk through explaining the approach. In general the plugin:

• Registers an oEmbed handler for the selected URLs (http://github.com/{something} in our example)
• Registers an internal oEmbed handler for that URL
• Handles the oEmbed call itself, retrieving the details it needs via the 3rd party’s API and then passing WordPress back an oEmbed response

Effectively you make your own site an oEmbed provider for the service you want to embed. Here’s the key bits of code:

First – we register an oEmbed handler, and point it to an internal URL:

function register_oembed_handler() {
    $oembed_url = home_url ();
    $key = get_key();
    $oembed_url = add_query_arg ( array ( 'github_oembed' => $key ), $oembed_url);
    wp_oembed_add_provider ( '#https?://github.com/.*#i', $oembed_url, true );
}
add_action ( 'init', 'register_oembed_handler' );

Note: get_key() just generates a site-specific key to stop other people using your oEmbed service.

Next, we tell WordPress to look out for an inbound oEmbed request:

function handle_oembed() {

    if ( ! isset ( $_GET['github_oembed'] ) ) {
        return;
    }
    // Check this request is valid
    if ( $_GET['github_oembed'] != $this->get_key() ) {
        header ( 'HTTP/1.0 403 Forbidden' );
	die ( 'Sad Octocat is sad.' );
    }

    // Check we have the required information
    $url = isset ( $_REQUEST['url'] ) ? $_REQUEST['url'] : null;
    $format = isset ( $_REQUEST['format'] ) ? $_REQUEST['format'] : null;

    // Call the 3rd party service, and create an oEmbed response here

}
add_action ( 'init', 'handle_oembed' );

All we need to do now, is retrieve the details we need using whatever API tools are available, then create an oEmbed response, e.g.

    $response = new stdClass();
    $response->type = 'rich';
    $response->width = '10';
    $response->height = '10';
    $response->version = '1.0';
    $response->title = $repo->description;
    $response->html = 'Your info here';
    
    header ( 'Content-Type: application/json' );
    echo json_encode ( $response );
    die();

And that’s it in theory, simple as pie. If you want to see working example, checkout out the github embed plugin on github:

The post Simple embedding for non oEmbed services appeared first on Lee Willis.

Instead, WordPress’ oEmbed support allows you to simply paste in the URL to the page from your browser, and WordPress does all of the hard work contacting the provider and agreeing how they can embed it.

I wanted to use this to embed a summary of a GitHub repository, but unfortunately GitHub doesn’t support oEmbed – although they do have a fairly simple API that can be used to retrieve information about the repository.

I could have written a shortcode to interrogate the API, but I wondered if I could achieve an oembed style user experience instead. The result is the Github Embed plugin which is available from WordPress.org. The plugin allows you simply to paste in the URL to either a GitHub profile, or a repository, and have information embedded into your post automatically.

As you might expect, the plugin is also hosted on GitHub, and is embedded below …

It needs a bit of UI love, and pretty sure it can show some more useful information, but it’s usable now.

The post Embed Github repo information in WordPress appeared first on Lee Willis.