Tweets and Instagram Posts in Expression­Engine

Twitter has a powerful feature that lets authors embed tweets directly into pages. Instagram, likewise, lets authors embed photos and videos directly into pages. In this article, we'll look at how to add Tweets and Instagram Posts to our content using Blocks.

In the previous article, we took an in-depth look into how to create captioned images using Blocks. Instead of repeating all of that again, for this article we'll build on top of what we developed in that article.

Starting them early! T-shirts for the little ones at the company picnic.

A photo posted by Click Rain (@clickrain) on

Media Embed

The first thing we need is an add-on capable of quickly embedding external media. For that, we grab the free Media Embed from Devot-ee.

During the installation, we need to make sure we install both Media Embed - Instagram and Media Embed - Twitter.

Block types

In addition to the "Content" and "Captioned Image" block types we already have, we'll set up two new block types.

Twitter setup
The Tweet block: short and simple; just a single field.

So again, click on Create block type. The first will be the Tweet block type with a single field. "Media Embed - Twitter" takes care of everything we need, so it's the only field we'll use. We certainly could add other fields to control whether to float the Tweet, but this will do for now.

Instagram setup
The Instagram Post block: yep, pretty much the same thing.

The second block type will be the Instagram Post block type, which is almost exactly the same.

Field Settings

We've defined these new block types, but we also need to select which blocks are allowed to use them. So, back to our content field, we need to make sure our two new block types are enabled.

Field Settings
Let the editor use the fancy new types.

In action

With our content field now capable of embedding Tweets and Instagram Posts into the content, let's see it in action.

A content field
We start, as usual, with some content. Again, Alice in Wonderland.
A tweet
And hey, let's add a Tweet for good measure. Thanks for the compliment, Nathan.
An Instagram post
Maybe an Instagram photo. I tried to find the most prototypical Instagram post ever: a photo of coffee.
More Content
And some more content for good measure.

We also have the "Captioned Image" block type available to use, but opted not to use it. No problem there. Blocks are there when you need them, but they usually don't get too upset if you don't use them.

The Code

Finally, we need to update the code to handle our two new block types. That shouldn't be hard, since they're pretty simple types.

We'll throw a <div> around each of them in case we need to do any special styling. For example, in case we want to constrain the size of the Instagram posts so they don't become massive and overpower our content.

{exp:channel:entries channel="page"}
<article>
  <header>
    <h1>{title}</h1>
  </header>
  <div class="content">
    {!-- tag pair now --}
    {page_content}

      {simple_content}
        {!-- for basic content, just
             output the content --}
        {content}
      {/simple_content}

      {captioned_image}
      <figure class="captioned-image">
        <img src="{image}" alt="{alt}">
        {if caption}
          <figcaption>{caption}</figcaption>
        {/if}
        </figure>
      {/captioned_image}

      {!-- NEW STUFF! --}
      {mediaembed_twitter}
      <div class="mediapost twitter">
        {content}
      </div>
      {/mediaembed_twitter}

      {mediaembed_instagram}
      <div class="mediapost instagram">
        {content}
      </div>
      {mediaembed_instagram}

    {/page_content}
  </div>
</article>
{/exp:channel:entries}

Done. Just like that, our editors have the ability to drop in Tweets and Instagram posts to really make their pages pop.