Adding Instagram Embeds to SilverStripe

A short but in-depth tutorial on how to easily add Instagram embedding functionality to SIlverStripe.
Published on Feb 1 2015 by Tim Larsen

In one of our previous blog articles, we briefly explored Shortcodes and OEmbed functionality in SilverStripe.

Today, we're going to have a crack at extending the built-in functionality that comes pre-packaged with SilverStripe - the OEmbed functionality.

To get started, simply create this file:

/mysite/_config/opauth.yml

Inside this file, write out the following:

---
Name: oembedcustom
---
Oembed:
  providers:
    'http://instagram.com/p/*':
      http: 'http://api.instagram.com/oembed/',
      https: 'https://api.instagram.com/oembed'
    'https://instagr.am/p/*':
      http: 'http://api.instagram.com/oembed/',
      https: 'https://api.instagram.com/oembed'

After saving this file, run a /dev/build?flush=all 

Note: any time that you edit a .yml file, you'll need to do a ?flush=all to ensure the cache that stores all of the yml data is flushed and any changes you've made are picked up.

That's all there is to the setup! Now, to pull in some fantastic instagram data, use the following code:

[embed type="rich"]http://instagram.com/p/ugxDqmnzqD/[/embed]

Note: it's super important that you use the type="rich" code, otherwise SilverStripe will assume that the embed code is an image type and will throw in some extra tags that are not required.

The above code will create the following content:

 

Chewing Gum! 😁 #repost

A post shared by ⭐️WOODY (@woody) on

As always, with the super-flexible OEmbed standard, there are some other variables that you can throw in to further customise your content. Currently, the tags that you'd have access to are listed below, but more may be added in the future, and they would be documented at the official Instagram Embedding Documentation

callback - useful if you want a javascript callback on image load (might be useful if you're using a lazy-loading plugin or similar)
omitscript- a boolean value that allows you to remove the instagram embed.js script from loading on your page - useful if you want to minimise requests and handle the embedding script in your own js
hidecaption - a boolean value that allows you to hide potentially pesky captions and just serve an image
maxwidth - the maximum width (in pixels) of the image to display. as all instagram images are square, the maxheight is inferred from this value 

Images credit: @camposwell's instagram account - http://instagram.com/camposwell/