This tutorial show you how to setup the Instagram widgets using the WP Social Feed Gallery (Instagram Feed Gallery) plugin.
This tutorial is for the Abigail theme only. If you're using another theme, see this tutorial to setup your Instagram.
*Note that this plugin was added in the following theme versions. Make sure your parent theme has been updated to one of these versions or higher:
- Abigail 1.1.5
Watch the video or see the written directions below:
STEP 1: Login to Instagram
1. Make sure you are logged into your Instgram.com account on your computer before you proceed.
STEP 2: Install Plugin
1. Login to your WordPress dashboard.
2. Make sure the WP Social Feed Gallery (Instagram Feed Gallery) plugin is installed and activated.
Plugin Installation after Theme Update: If you are replacing the old recommended Instagram plugin, once you upgrade your theme to the newest version, you will receive a Recommended Plugin notice and can easily install and activate the plugin by clicking on the "Begin activating plugin" link (see video for more detailed directions)Plugin Installation with Theme Change: If you've just purchased on of our themes, the plugin will be installed as part of the Theme Setup Wizard process. Make sure the plugin is installed and activated.
STEP 3: Setup Plugin
1. Once you have installed and activated the plugin, find the Instagram Gallery link on your left Dashboard menu.
2. On the Account page, click the blue ADD NEW ACCOUNT button.
3. Your screen will reload 2 times. This is supposed to happen, just let it do it's thing. Once the plugin has successfully connected to Instagram, you will see a new box on the Account page with your ID, User, Name and Token. (If the "Add New Account" button isn't working, click the link that says "Button not working" and you will be able to Manually connect your account.)
4. Your Instagram account is now connected. Now it's time to create some Feeds.
STEP 4: Create Feeds
1. Once you've connected your Instagram account, click on the Feeds tab on the "Instagram Feed Gallery" settings page.
2. On the Feeds page, click the purple Add New Gallery button. A whole bunch of settings will appear. Set your settings as desired.
Below are explanations of the feed settings. Some areas are only available on the Pro (paid) version. Just scroll down to reach the available settings.
You can create multiple feeds for different widgets/display options. In the video above, I discuss the recommended options and they are also listed below. I generally create 1 feed for the footer widget and one for the sidebar widget.
Type: Choose a User or Tag Feed.
2. User/Tag: Select your user from the list or enter a tag for your feed.
3. Layout: Choose Gallery (grid) or Carousel (slider). Recommended: Gallery
4. Limit: Number of image to display. (Recommended: 6 for sidebar / 9 for footer custom grid)
5. Columns: The number of columns to display the images in (Recommended: 3 for sidebar / 9 for footer custom grid)
6. Image Size: Choose an image size from the options. (Recommended: Medium for sidebar / Standard for footer)
7. Image Spacing: White space around each image. (Recommended: 5 for sidebar / 0 for footer)
8. Images popup: Check this box if you want your images to appear in a popup lightbox when a visitor clicks on it. They can then click to view on Instagram. Otherwise, clicking on the image will take the visitor directly to Instagram). (Recommended: unchecked)
9. Images Mask: If selected, a colored background will appear over images when a visitor hovers over a specific image. You can display like and comment counts on this mask. There is also a link icon that will take visitors to Instagram if clicked. If this option is not checked, no mask will appear and visitors will just be taken directly to Instagram when they click on the image. (Recommended: checked)
10. Images Mask Color: The background color of the Images Mask. Enter or pick a color.
11. Images Mask Likes: If this option is checked, a likes count and icon will appear on the Images Mask. (Recommended: checked)
12. Images Mask Comments: If this option is checked, a comment count and icon will appear on the Images Mask. (Recommended: checked)
13. Instagram Button: If this option is checked, an Instagram button that links to your Instagram profile page will appear in the widget. (Recommended: checked)
14. Instagram button text: Text to display on the Instagram Button.
15. Instagram button background: Background color of the Instagram button. You can set the Footer Widget area text color in Appearance > Customize > Theme Options > Colors. Otherwise, the text colors are white. (Recommended: match theme colors for sidebar / white for footer)
16. Instagram button hover background: Background hover color of the Instagram button EXCEPT in the Footer Widget Area. You can set the Footer Widget area text color in Appearance > Customize > Theme Options > Colors. Otherwise, the text colors are white. (Recommended: match theme colors for sidebar / match theme colors for footer)
3. Once your Settings are chosen, click the pink Update button.
4. If you'd like to create another Feed, click the purple Add New Gallery button. Your existing feed will appear at the top of the page and you can Edit or Delete feeds as needed.
Tip: If your pictures haven't updated in a while, you can also come to this page and click the pink Cache button to reload your images cache and update the feed.
STEP 5: Place Widgets
1. Once you've created your feeds, go to Appearance > Customize.
2. Click on the Widgets Panel.
3. Select the Widget Area where you want to install the Instagram Widget. Most common are Sidebar and Fullwidth Footer. Click on the widget area panel to open options.
4. In the widget area, click the Add a widget button.
5. Find the Instagram Feed Gallery widget in the list and click on it to add it.
6. Give your widget a Title if desired.
7. Select your Instagram gallery from the drop down list. They will be listed in the order you created them from top to bottom (oldest feed at top). You can also create a new feed by clicking the "Add New Gallery" link.
8. Click the Done link in the widget. Your widget is now added.
Disable Custom Footer Grid
To disable the custom footer grid for Abigail and use a "standard" layout.
1. On the WordPress dashboard, go to Appearance > Customize.
2. Click on the Theme Options tab.
3. Click on the Footer tab.
4. Click the Enable Custom Instagram Grid to enable or disable the custom grid. If disabled, the grid will appear in a regular grid layout.
5. Click the Publish button to save changes.