Embed Instagram Picture in WordPress with Shortcode

  • follow us in feedly
Published June 4, 2013 by Brad Knutson
Embed Instagram Picture in WordPress

Today after resisting for a long time, I finally joined Instagram. I’m not sure exactly why I’ve resisted it for so long, but that is besides the point.

I’m not ready to admit that Instagram is a legitimate marketing platform yet (and it may never be), but I do see some value in it, especially if you’re just starting out and want to build your social following.

Immediately after joining Instagram, I started thinking of ways to integrate it into WordPress. There are tons of plugins out there that will give you Instagram slideshows, embed images, and much more – but I wanted a light-weight way of embedding an image while at the same time promoting my Instagram account.

So, I decided on writing a WordPress shortcode that would embed an image, and also link the user to my profile. To fancy it up a bit, I thought it would be an appealing effect if the link was the Instagram logo, and it only showed when you hovered over the image. So I came up with the below.

Instagram from bradsknutson Instagram

The above image, and hover effect, was generated by a simple WordPress shortcode.

Let’s dig into the code I used to set this up.


First we need to add a little bit of style. I took a large portion of the below from Instagram’s badge page, and added my own tweaks to create the hover effect. Add this CSS to your main stylesheet.

ig-b- {
    display: inline-block;
.ig-b- img {
    visibility: hidden;
.ig-b-:hover {
    background-position: 0 -60px;
.ig-b-:active {
    background-position: 0 -120px;
.ig-b-48 {
    width: 48px;
    height: 48px;
    background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0;
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .ig-b-48 {
        background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png);
        background-size: 60px 178px;
.image-container {
    position: relative;
    display: inline-block;
.image-container:hover a {
    display: block;
.image-container a {
    display: none;
    position: absolute;
    bottom: 15px;
    right: 15px;
.image-container img {
    height: 100%;
    width: 100%;

WordPress Shortcode

Now that we have the styles set up, we need to build a WordPress shortcode that will generate the code necessary for the embedded image to show up properly. Add the below code to your WordPress theme’s functions.php file.

function instagram_shortcode( $atts ) {
	extract( shortcode_atts( array(
		'url' => 'http://instagram.com/p/aJjzCNrnHL',
		'size' => 'm',
		'user' => 'bradsknutson',
	), $atts ) );
    if (!preg_match("/.*\/$/", $url)) {
         $url = "$url" . "/";
	if ( !( $size == 't' || $size == 'm' || $size == 'l' )) {
		$size = 'm';
	$instagram = '<div class="image-container">
    <img src="'. $url .'media/?size='. $size .'" alt="Instagram from '. $user .'" />
    <a href="http://instagram.com/'. $user .'?ref=badge" target="_blank" class="ig-b- ig-b-48" rel="nofollow"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>
	return $instagram;
add_shortcode( 'instagram', 'instagram_shortcode' );

This shortcode will take three optional parameters (and fall back to the defaults if they are not specified). An example with the optional variables set is below.

Instagram from bradsknutson Instagram

I set my defaults to my own preferences, but you’ll want to make sure you change them to something that suites you better.

'url' => 'http://instagram.com/p/aJjzCNrnHL', // URL or image'size' => 'l, // size - either t, m, or l'user' => 'bradsknutson', // user's whose profile you want to link to

To get the image URL, just head over to your Instagram profile in a browser (outside of the app) and click on any image. The URL in the address bar is the one we’re after.

Instagram Image URL

The rest is just a little bit of error handling. I didn’t dive in too deep, but it should suffice for a basic implementation.

Here are a few more examples.

Instagram from bradsknutson Instagram

Instagram from bradsknutson Instagram

Instagram from bradsknutson Instagram

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “Embed Instagram Picture in WordPress with Shortcode

  1. JoAnne Neish

    help please….I love my bootcamp people, but I think they’ve used the embedded instagram abilities in their wordpress website, and everytime I receive an email newsletter with the embedded instagram, I get an annoying pop up box in MS Outlook: contacting: \\badges.instagram.com\static\images
    It totally STOPS my email.
    And i’m actually on line with Microsoft technicians now for help from their end.

    I’m thinking you might be able to help, too!

    thank, – – – Jo

    1. Brad Knutson Post author

      It sounds like your email client is trying to grab an image from Instagram’s site. I would have your people look at how the email is generated, and perhaps pull the files locally.

      If you have no control over the email (it’s from an external company) I would unsubscribe from them!

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">