5 min read

So far I’ve had to embed external media from three sources into my WordPress sites.

  1. Flickr images
  2. Instagram Posts
  3. Tweets

The general wisdom on the Internet these days will instruct one to just “paste a link to the content on its own line in the WordPress editor and make sure that it isn’t hyperlinked”.  This works – almost.  The most frustrating problem I’ve faced with embedded media is adding formatting – such as centering the media in my blog post.

I’m not going to cover all the ways to embed these types of media into your blog post.  I’m just going to cover the methods that I use so that I can center the media.  You can use these ideas to apply more formatting if you have the know-how.

The cases that I’m using to illustrate the issues I’ve met are best viewed on a larger screen than a phone.  Please view this on your computer if you really want to understand the issues.

How to embed external media

 

Embed Flickr Images in WordPress Posts

I’m using a picture that I took of Kevin Lyttle.  Take a look at his social media channels when you get a chance.  I really dig his Instagram (@kevinlyttle)!

 

Kevin Lyttle on Instagram @kevinlyttle - embed external media

There are two types of information you can generally use to embed external media in WordPress.  The first is a link.  Click the share button in Flickr and you’re immediately presented with the share screen that includes the URL for sharing.  The URL is in short form like so – https: //flic.kr/p/UJhySqF (I added a space after the : so WP wouldn’t process it).  My chosen image would look as follows if I were to copy the URL on to its own line in the WordPress visual editor.

URL on its own line in the visual editor

Kevin

That’s alright – but I don’t have any control over the formatting of the image (even if I click the “edit” button).  I can’t resize it and I can’t center it using the post editor’s toolbar.  The theme that I use doesn’t illustrate my point very well because the column width is narrow and the image fills the column.  The problem would be clear if your theme uses a wider column.  I still don’t like this method with my theme though because I want to make sure my layout is consistent across multiple platforms..

Let’s try pasting the URL into the text editor instead.

URL on its own line in the text editor

Kevin

We get the same result.

Now click on the embed link in the Flickr share dialogue box.  We have options!  I’m going to select “header” and “footer” and choose one of the medium sizes.  The smaller image sizes will better illustrate the problem.  The code that it generates is as follows.

<a data-flickr-embed=”true” data-header=”true” data-footer=”true” href=”https://www.flickr.com/photos/leecrow/34609077132/in/dateposted-public/” title=”Kevin”><img src=”https://www.leecrow.com/blog/wp-content/uploads/2017/10/34609077132_802f8e121b-2.jpg” width=”500″ height=”400″ alt=”Kevin”>

The embed code above is not edited and I pasted it on to its own line in the WordPress visual editor.  As you can see the code did not execute.  Now I’m going to paste the same code into the WordPress text editor.

Embed code on its own line in the text editor

Kevin

OK – the image is in my post but it’s still aligned left (remember that I like to center align my images).  However, notice that you can now click on the image and use the WP toolbar and other tools.  The Flickr header and footer options that we selected in the sharing dialogue don’t seem to do anything.  I don’t know why this is but this isn’t data that I would normally include in my images anyway, so it isn’t bothering me.  Here is the same image using the same embed code in the text editor – but I centered it using the WP visual editor.

Embed code on its own line in the text editor & centered

Kevin

This is a better result, in my opinion, than what we were given using the earlier methods.  The real power is that you can easily format the image to look the way that you want it to look within your post and text.  This is what I want to do with all of my embedded media.

The following sections are more brief just to document the methods that I use.  The reasons are the same as the Flickr example.

Embed Instagram Posts in WordPress Posts

Here is an image I took of my friend Rich.  Rich makes me take on creative endeavors that are outside of my comfort zone – constantly pushing me.

If a picture is worth a thousand words… Then what more can I say! Speak less listen more learn from those whom have done it before…. #growth #hotlinetime #knowledge#gym #banger #90 #LA #paris #work. Photo – Lee Crow

A post shared by hotlinetime (@hotlinetime) on

 

I embedded this by copying the embed code to the post into the WP text editor.  You get the embed external media code on Instagram by clicking the three dots next to the comment field and clicking on “embed”.  I was able to center the media in my post by using <div> tags before and after the embed code in the text editor.

Follow Rich on Instagram if you want a glimpse into the life of a rapper who is in tune with the #BahrainHustle! – @hotlinetime

Hotline on Instagram @hotlinetime

Embed Tweets in WordPress Posts

The process to embed tweets is the same as the process for Instagram posts.  You get the embed code for a tweet on Twitter and then the WordPress instructions are exactly the same.  However, there is an easier alternative for tweets.  I use the Extra Theme from Elegant Themes but I’m sure you could use this solution with your theme as well.  In the theme options I can add the following to the Custom CSS field on the General tab.

.twitter-tweet {margin: auto;}

Now all I have to do is copy the URL to the tweet I want to embed and paste it in the WP visual editor on its own line.  Everything is then formatted exactly as I like it with zero fuss.  See below.

The featured person in that tweet is Sarah.  Sarah is awesome.  Follow her on Instagram too!  @sarahthecosmedic

Sarah on Instagram @sarahthecosmedic

 


 

Let me know if you found this information helpful.  Shit, let me know if you know of an easier way to do all of this stuff!

Save

Lee Crow

Lee Crow

Creative Bedou at Lee Crow [CREATIVE]
Profesional headshot and creative portrait photographer in Bahrain.Check out www.bahrainheadshots.com and www.leecrow.com for more information about me.
Lee Crow