Setting up the Instagram Widget on Your Posts and Pages

Looking to add fun, dynamic, visual content from Instagram to your Wordpress site? Here's how.

These are instructions for setting up the Instagram feed on your WordPress site that uses the PC External Theme. (Not sure what theme your site uses? This feature is probably available to you.)

At the time of this writing, you can view the Instagram Feed Widget on the bottom of the college’s homepage, as well as the Alumni homepage. The screenshot to the right shows roughly how you should expect this widget to look.

Creating the Widget

All widgets are available to edit through the WordPress backend under the Appearance menu. Hover over Appearance in the WordPress menu and click on Widgets. The widget should be listed under Available Widgets as “PC Instagram.” (If you don’t see this in your Available Widgets, it may need to be activated. Please contact Web Services and we’ll be glad to activate this feature for you on your site.)

Note: you’ll need your Instagram credentials before you go any further.

Drag the widget into the widget area where you’d like to place the widget. Placing the widget in the Sidebar widget area will let you use it in the layer cake and in the sidebars of posts and pages. If you want to create a branded social media layer like in the Alumni homepage, place it in the Social Media Sidebar.

Check back after Gutenberg launches — there will probably be more display options after that.

There a few steps to creating the widget. Some of them may seem a little onerous, but don’t worry. We’ll walk you through it.

There are pretty good instructions right on the widget! We’ll be following these togethr.

The first step is to click on the link that says To get your Instagram User ID#, click here.

At the link, you’ll enter in your user name and receive a number back, which you can put in the Instagram User Id field back in WordPress.

After you’ve done this, you’ll need to move on to the next set of instructions, under the Instagram Token field. This has a link which takes you to Instagram, where you’ll have to sign in with the credentials of the account you want to display and register as a developer (it only takes a few seconds) and then, continuing to follow the instructions (still in the instagram developer portal), you’ll be able to click “manage clients” and “register a new client”.

Fill out the information under register a new client.

Important: Before you finish registering your new client – back in WordPress, you’ll see instructions that say “Make sure to use this URL for the “Redirect URI”. Right click on the URL in those instructions, and “Save link location.” You need to add this to your new client registration in Instagram under Redirect URI.

Once you register a new client, you new have a client ID, with which you can head back to WordPress.

Now, just like you did when you get the redirect URI, right click on Parameter URL and copy that link to your clipboard. Paste it into notepad, edit the CLIENT-ID with your new Instagram client id and visit the url in your browser, and this will give you the Instagram token, which is the last thing you’ll need to get the widget configured

If you have any questions, please feel free to contact Web Services and we’d be glad to help you right away.

Leave a Reply

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