Hi. I’m Dre Armeda. I'm a Harley enthusiast, and a Chargers fan. I wear many hats, and love tacos. I'm infatuated with WordPress, web design, and web security. I work at Sucuri Security. I hope to help make the web a safer place!
post

Create An Awesome Instagram Photo Website Using WordPress

This week Instagram decided to change their terms which caught a lot of social attention, and the critics hammered them on their new position. After the backlash, we got a statement from Instagram co-founder giving his take on the changes.

What Now?

Sticking with Instagram is an option. Moving back to Flickr (which I also love) is also viable, along with other options I’m sure. I love the use of 3rd party apps, but my whole point in writing this quick article is to show you how to bring it all back to you, at least when it comes to Instagram.

The next few sections of this post will walk you through setting up WordPress to pull all of your existing images from Instagram, and also configure your WordPress site to auto-post all future Instagram images.

Make It Happen, Captain!

I am a WordPress evangelist, but you knew that already. So why not bring all your Instagram pictures back to a WordPress site where you can control all aspects of the site? You can control how it is viewed and used by your users/visitors, you can control how you administrate the images, along with how you share and socialize it. At the end of the day if Instagram goes away, you get to keep all your awesome images.

Yah, lets do that :)

Step 1 – Get WordPress up on a site

Get WordPress set up on a magic server some where. In my instance, I bought a new domain named InstaDre and set it up on an inexpensive shared host, at least for now.

InstaDre

It was cheap and quick to get the site running once I decided to do it. I loaded a fresh copy of WordPress 3.5 and a free theme from the WordPress Theme directory. I found a simple and clean 1-column theme (Vintage Camera by Caroline Moore) that supports Post Formats.

Step 2 – Install & Configure DsgnWrks Instagram Importer

It’s time to bring in your Instagram images as WordPress posts. InstaDre is dedicated to this so I had no other content. You can definitely mix it up and get creative, maybe even piping in Tweets and other fun content you want to archive.

Note: I had already done the import using Step 2 before I found out you could do it with Instagrate which I cover in Step 3. If you only want to use one plugin for importing existing Instagram images, and auto-posting future images, go straight to Step 3.

Install the plugin

A friend and awesome developer, Justin Sternberg created DsgnWrks Instagram Importer which is what I used to import the few hundred Instagram images I have accumulated using the service.

You can grab it from the plugin page linked above, or from the WordPress Plugin directory. You can also do a search via your WordPress admin panel for the plugin and install it in a couple clicks from there.

Once installed, go to wp-admin > Tools > Instagram Importer to check the plugin settings, and to begin the import.

DsgnWrks Instagram Importer

 

Time to authenticate your Instagram account.

This is seamless, you can easily add your Instagram user, or even multiple users if it tickles your fancy. It’s a secure connection (It’s over SSL – HTTPS) which initiates authorization for WordPress to connect to your Instagram account.

Instagram Auth

Adjust settings & start import

There aren’t an overwhelming amount of options, which is a good thing! It does however allow you to adjust various post options, which is useful and granular enough for various blog configurations.

Instagram Importer Post Options

Above is a screenshot of my settings on InstaDre. I checked the post featured image setting as this is required to import the images into your WordPress media library. Then I adjusted the output for post content by separating the various things the importer pulls from Instagram, and I added some classes so I can easily style later. I also enabled these to import to a published post and attached them to my user. You can add the import to your categories and tags of choice.

That’s it for the importer! Click Import and let it do its thing. once it’s done, you will have brand new posts in WordPress for each Instagram image you have.

Step 3 – Install & Configure InstaGrate to WordPress

I added a quick note in Step 2 about the ability to import existing images with Instagrate. DsgnWrks Instagram Importer works great so I am leaving it in the post, but if you only want one plugin to manage old and new incoming Instagram images, you can use InstaGrate for WordPress exclusively.

Install the plugin

You know this story, we just chatted it up in Step 2. Best way to install Instagrate in my humble opinion is through your WordPress dashboard, so login to wp-admin and go to Plugins > Add New. The plugin is in the Official WordPress plugin directory and you can manually download as well. They do have a pro version but I have not used it so you’ll have to make your own judgments there.

Configure Instagrate for WordPress

Instagrate Options

You’re up and running, lets get this baby importing your images so you can sit back and enjoy your favorite flavor of gourmet tacos. You should already be in wp-admin, you can get to the plugin config page via Settings > Instagrate to WordPress.

Authenticate to Instagram

First things first. You’re going to authenticate to your Instagram account just like you did in Step 2. Easy peasy, lemon squeezy!

Once your account is authenticated you’ll your feed images pop up on the right side of various plugin settings and options. At the top of the settings area you will have a drop down to choose where you want the plugin to start an import. By default it will be at the last image so you won’t be bringing in any old images. You can however choose to bring in everything from your Instagram account.

WordPress post options

Lets get this show on the road! why deal with posting manually when you can set this up to automatically post all your Instagram images? Check out the WordPress post options:

Instagrate WordPress Post Options

As you can see, not overwhelming either, but does have a few more options than what you saw in the Importer plugin. You can do some default post settings changes like customizing the image size and adding image CSS classes if you choose.

How I store and present my images

The image storage and presentation area has more settings and this is probably the most important area to pay attention to. You definitely want to configure the images to save to your Media library; otherwise it defeats the purpose of this whole post :)

You then have various options like selecting author, categories, date, and even post format, status, and type. I closely matched these settings to what I did in the initial import so everything is uniform.

Final customizations

The last area I adjusted was the Custom Body Text so that I could ensure that any new images coming in would add the Instagram description and a WordPress caption box to match the images I initially imported. This is something you can play with to match your needs.

Walking away happy

Once you tweak everything, click the Update Options button. That’s it!

Now, post away on Instagram and every image you create and upload to the app will automatically get posted on your WordPress site. Check out InstaDre.com for a working demo created using the tutorial above. If you didn’t realize, the only cost beyond a little time and fun is the web hosting fees.

Get creative and make an awesome theme, or maybe integrate other sharing services or social networks. It’s yours to have fun with building, and in the end yours to keep. The important take away is that you retain your content, and that’s the beauty of WordPress baby!

Comments

  1. Hi Nice one,
    Seems as though dsgnwrks have not kept their URLS and are revamping their website which broke their Plugin :\

  2. When I activated the plugin , it says php 34line code error ? anyone have the same problem ?

  3. Hey Dre!
    I owe you a thankful comment. Thanks for featuring my plugin here. :) Also as an fyi to future readers, the DsgnWrks Instagram Importer has supported automatic import since version 1.2.0 and the upcoming version 1.2.6 will support importing instagram video as well (although you’ll be responsible for displaying the video in your theme).

    Cheers!

  4. Tried several times with InstaGrate for WordPress but just couldn’t get it to work properly.
    Then noticed that DsgnWrks Instagram Importer newer version supports automatic updates… worked first time!

Speak Your Mind

*

Notify me of followup comments via e-mail. You can also subscribe without commenting.