Tutorials

How to Display a Curated Instagram Feed on Your WordPress Site

The photo sharing application Instagram was launched in 2010 and has since grown to be one of the most popular social networks with over 700 million users.

Instagram can be a particularly successful platform to interact with for fashion and lifestyle brands, but almost any individual or company can benefit by using Instagram regularly to showcase products, promote blog posts, and grow their brand.

Instagram Hashtag Feeds

One way in which Instagram can be particularly useful for marketing is by encouraging other Instagram users to post their own photos using your hashtag. You can then re-post these images on your own account, or view the hashtag as an individual feed outside the Instagram app.

Some examples of this in action include:

Accessories brand, Plantwear

plantwear instagram feed

Baby carrier, Ergobaby

ergobaby instagram feed

San Diego Zoo

san diego zoo instagram feed

How to Display a Hashtag Instagram Feed on WordPress for Free

As with most WordPress plugins, there are some free options for getting these Instagram images on your site, and there is also a selection of paid-for premium software for those who need additional functionality. We’ll go through a way of getting a basic hashtag Instagram feed on your site for free first.

WP Instagram Widget Plugin – How to Install and Style

Most of the free plugins will let you display your own Instagram feed on your WordPress site but you’ll need to upgrade to the pro version to import photos from several different users or display by hashtag.

WP Instagram widget is one of the few free plugins that displays an Instagram feed based on hashtag. It’s not as customizable as some other options and needs some tweaking to get it to look decent, but if you’re looking for a quick way to add an Instagram feed to your WordPress site, it should do the job.

You’ll need some basic knowledge of CSS and WordPress development to get it to look nice and fit your site – it doesn’t come with any styling options. But don’t worry if you haven’t got a clue about coding, as we’ve included some sample CSS in these instructions you can simply copy and paste in.

1. Install the plugin

Search for and install the plugin from your WordPress dashboard

WP instagram widget

2. Find the plugin widget

Rather than having a separate options screen, the plugin simply adds a widget, which you’ll find under Appearance > Widgets.

instagram widget

3. Position the widget

Drag the widget to where you want it to appear on your site – this may be in one of the sidebars or in the footer. You can then click the small triangle to expand the widget and access its settings.

WP instagram widget settings

4. Set widget options

Set the title, number of photos, photo size, and link options to your liking and enter the hashtag you want to create a feed from in the @username or #tag box, then click the save button. You’ll be able to see your feed wherever you put the widget.

unstyled instagram widget

5. Add CSS to your theme

As you can see, the feed is pretty much un-styled and doesn’t look great as it is, so you’ll need to write some custom CSS to make it look a bit nicer. If you’re already using a child theme you can add the styles right into your theme stylesheet. Or you can install a custom CSS plugin such as WP Add Custom CSS.

6. Remove list markers

The first step is to get rid of the dots along the left of the images – these are there because the feed is marked up as a list. The class applied to the image list is .instagram-pics and the code you need to remove the bullets and any excess spacing added by your theme is:

[php].instagram-pics {list-style: none; margin:0;}[/php]

7. Position images in a grid

Next you’ll probably want to display your images in a grid instead of one long line. To do this, float the list items and set a width depending on how many columns you want (we’ve set 50% here for 2 columns, you’d need to set 33.33% for 3 columns, or 25% for 4 columns).

[php].instagram-pics li {float: left; width:50%;}[/php]

8. Clear floats

You’ll need to clear the float after the main widget class (.null-instagram-feed ) to stop it from messing up other objects that come after it on the page:

[php].null-instagram-feed p.clear{   clear: both; }[/php]

9. Check how things look

If you go back to the front-end of your website now, you’ll already notice a big improvement.

styled instagram widget

10. Add padding to the grid

If you want to space out your grid a little more, you can add some padding to your images by editing the code as follows:

[php].instagram-pics li {   float: left; width:50%; padding:3px;}[/php]

instagram widget with padding

11. Style the Follow Me! link

Finally you’ll probably want to style the “Follow me!” link a little (it may already look different to this example depending on your theme). The following code will add some padding to move it a little further away from the images and style it to make it look like a button.

[php].null-instagram-feed p.clear { padding-top: 20px; }

.null-instagram-feed p.clear a { background-color:#000; color:#fff; border:0; padding: 10px 20px; }

.null-instagram-feed p.clear a:hover {   background: #fff; color: #000; text-decoration: none; border-style: solid; border-width:1px; border-color:#000; }[/php]

Here’s the finished product:

final styled instagram widget

For your convenience, here’s the complete code to achieve this look so you can just paste it right into your stylesheet or custom CSS plugin and edit how you wish:

[php].instagram-pics {   list-style: none; margin:0;}

.instagram-pics li {   float: left; width: 50%; padding: 3px;}

.null-instagram-feed p.clear {   clear: both; }

.null-instagram-feed p.clear { padding-top: 20px; }

.null-instagram-feed p.clear a { background-color:#000; color:#fff; border:0; padding: 10px 20px; }[/php]

.null-instagram-feed p.clear a:hover {   background: #fff; color: #000; text-decoration: none; border-style: solid; border-width:1px; border-color:#000; }

Premium Instagram WordPress Plugins and Software

As always, if you don’t want to mess around with code and want to explore some slick styling options and additional settings, you can use one of the several pro Instagram plugins that are available for WordPress.

Smash Balloon Instagram Feed

smash balloon instagram feed

This simple plugin allows you to display photos from multiple Instagram accounts in one feed, or in separate feeds. It’s responsive and customizable to fit with the branding of your site and you can choose to display photos as a grid or carousel. You can have a play around with some of the available options on the demo on their site.

Features and available settings include:

  • Display photos by user ID, hashtag, photos you’ve liked, location, or individual photos you specify
  • Edit settings via control panel or by using shortcode options
  • Edit width and height of feed, colors, padding, number of columns, number of photos, display order, and resolution
  • Choice of photo hover styles
  • Display as grid or carousel
  • Option to show header for user ID with optional bio text and number of followers
  • Enable or disable caption, and likes and comments
  • Load more button
  • Follow button
  • Post filtering (show or block photos by hashtag)
  • Moderation option
  • Custom CSS and JavaScript possible for advanced customization.

Note: there’s a free version of this plugin but you can only display a single user account with it. To display photos by hashtag, location, and other criteria, you’ll need to upgrade to the pro version.

The Pro version of the plugin costs $39 for a personal single site license, $79 for up to 5 sites, or $119 for unlimited sites.

Demo | Buy plugin

Instagram Feed WD

instagram feed WD

From the team at Web Dorado, this plugin is very similar to the Smash Balloon plugin with the option of thumbnail, masonry, blog style, or image browser layout. Media can be displayed by username, hashtag, or liked photos, and there are a number of customization options.

Full options and settings include:

  • Display as thumbnails, masonry, blog style, or image browser
  • Choice of themes
  • Display by username/hashtag or liked photos
  • Set a featured image
  • Load more images by pagination, “load more” button, or infinite scroll
  • Sort images by date, likes, comments, or random
  • Set number of photos to display, number of photos to load, and number of columns
  • Turn on or off likes, comments, description, username, user data, user bio, follow count
  • Clicking photo can open Lightbox or redirect to Instagram
  • Full Lightbox styling
  • Conditional filters to include or exclude hashtags and other criteria.

There’s also a free version of this plugin available that will allow you to display a single user Instagram feed with no filtering or customization options.

The cheapest license for the pro version is $25, which includes 6 months of support and updates for one domain, or you can opt for the business license for $40 with one year of support for up to 3 sites, or the developer license for unlimited domains and one year of support for $60.

Demo | Buy plugin

Summing Up

It’s best to be cautious when displaying an unmoderated and unfiltered hashtag feed on your site, as this can easily be manipulated (it’s very easy for anyone to post an inappropriate image using your hashtag, which would then automatically show up on your site).

Another thing to bear in mind is that you don’t automatically have permission to post other people’s images just because they’re posted on Instagram. Brands usually get this permission by asking users to add a specific unique hashtag to their images if they’re happy for them to be reposted.

If we’ve missed your favorite Instagram plugin for displaying hashtag feeds, please leave it in the comments.

Posted by Rachel

One Comment

  1. Instagram one of the trending social media platforms promoting website through social media is really effective,Thanks for sharing expecting more like this from you.

    Reply

Leave a reply

Your email address will not be published. Required fields are marked *