Create oembed previews for my selfhosted WP?

2 comments

1. A self-hosted oEmbed provider: A simple Hello World demo

   Here’s a very simple demo of a self hosted oembed provider (site A) that implements the json spec on oembed.com for rich type responses. Other available types are link, photo and video.

   Site A:

   This site is a self-hosted oembed provider that supports the json format and only implements the required oembed specs and skips the optional parameters.

   We also implement 404 for urls not found and 501 for formats not available.

   The key functions used here, are url_to_postid(), status_header(), get_post() and wp_send_json().

   /**
    * Demo: A simple self-hosted oEmbed provider.
    */
   
   add_action( 'template_redirect', 'simple_oembed_provider_so27693829' ) 
   
   function simple_oembed_provider_so27693829()
   {
       // Catch the user input:
       $input = filter_input_array( INPUT_GET, array(
           'simple-oembed'   => FILTER_SANITIZE_NUMBER_INT,
            'url'       => FILTER_SANITIZE_URL,
            'format'    => FILTER_SANITIZE_STRING,
            'maxwidth'  => FILTER_SANITIZE_NUMBER_INT,
            'maxheight' => FILTER_SANITIZE_NUMBER_INT,
           )
       );
   
       // Our oembed service is activated:
       if( 1 == $input['simple-oembed'] )
       {
           //--------------
           // We only support json format:
           //--------------
           if( 'json' != $input['format'] ) 
           {
               status_header( 501 ); 
               nocache_headers();
               exit();
   
           $pid = url_to_postid( $input['url'] );
   
           //--------------
           // The url doesn't exists:
           //--------------
           if( 0 == $pid ) 
           {
               status_header( 404 );     
               nocache_headers();
               exit();
           }
   
           //--------------
           // json output:
           //--------------
           else
           {
               $post = get_post( $pid );
               $data = array(
                   'version' => '1.0',
                   'type'    => 'rich',
                   'width'   => empty( $input['maxwidth'] ) ? 600 : min( 600, $input['maxwidth'] ),
                   'height'  => empty( $input['maxheight'] ) ? 400 : min( 400, $input['maxheight'] ), 
                   'html'    => sprintf(
                      '<div class="simple-oembed"><h2><a href="%s">%s</a></h2><p>%s</p></div>',
                       get_permalink( $pid ),
                       apply_filters( 'the_title', $post->post_title ),    
                       'Check out this great post!'
                   )
               );
               wp_send_json( $data );
           }
       }
   }
   

   Site B:

   To test the oembed service provided by Site A, we must register it via:

   add_action( 'init', 'add_our_oembed_provider_so27693829' );
   
   function add_our_oembed_provider_so27693829()
   {
       wp_oembed_add_provider( 
           $format   = 'http://site-a.tld/*', 
           $provider = 'http://site-a.tld/?simple-oembed=1&' 
       );
   }
   

   on site B.

   Then when we add a site-a.tld link in the editor we get:

   Before saving:

   

   After saving:

   

   Here site-b.tld will send the following GET request to site-a.tld:

   http://site-a.tld/?simple-oembed=1
   &format=json
   &maxwidth=625
   &maxheight=938
   &url=http://site-a.tld/hello-world/
   

   which gives the following 200 status response:

   {
       "version":"1.0",
       "type":"rich",
       "width":600,
       "height":400,
       "html":"<div class="simple-oembed"><h2><a href="http://site-a.tld/hello-world/">Hello World from Site A</a></h2><p>Check out this great post!</p></div>"
   }
   

   ps: I’ve not mentioned the auto oEmbed discovery.

   Helpful resources:

   • The oEmbed specs.

   • The oEmbed Provider plugin (I’m not related to this one, but it helped me while writing this answer.)

   • If you want to know how to use the WordPress JSON REST API plugin by Ryan McCue, with the oembed provider, you might want to check out this blog post and this one (both great).

   Log in to Reply

2. you can simply add the OG meta tags to your themes header.php in the section before wp_head():

   I copied this from my themes header.php so you may have to change it to your needs.

   Edit: you can see my themes header.php online at github: https://github.com/service4me/sandbox-wordpress-theme/blob/master/header.php

   OG Title:

   <meta property="og:title" content="<?php is_front_page() ? bloginfo('description') : wp_title( '');?> - <?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" />
   

   OG Type:

   <meta property="og:type" content="<?php if ( is_single() ) { ?>article<?php } else { ?>Website<?php } ?>" />
   

   OG URL:

   <meta property="og:url" content="<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" />
   

   OG Image:

   <meta property="og:image" content="<?php if ( is_single() && has_post_thumbnail() ) { 
   
         $ogImageUrl = wp_get_attachment_image_src(get_post_thumbnail_id(),’large’, true);
   
         echo $ogImageUrl[0];
   
       } else {
   
         echo bloginfo('template_directory'), '/img/logo.png';
   
       } ?>" />
   

   OG Description:

   <meta property="og:description" content="<?php if ( is_front_page() ) {
   
         bloginfo('description');
   
       } else {
   
         if ( is_single() ) {
   
           echo htmlspecialchars( get_the_excerpt() );
   
         } else {
   
           wp_title( '');
   
         }
   
       } ?>" />
   

   OG Locale:

   <meta property="og:locale" content="de_AT" />
   

   Log in to Reply