1. Home
  2. Docs
  3. Madrid WordPress Theme
  4. Madrid Theme Options & Widgets
  5. Widget: Instagram Feed

Widget: Instagram Feed

Madrid Theme comes with a ¬†styled Instagram gallery at it’s footer section where you can display all the latest of your Instagram activity. The setup of it¬†is super easy, all you need to do is:

Display your Instagram Feed

UPDATE SEPTEMBER 2019!! WP INSTANT FEEDS PLUGIN BY MNMLTHMS IS NO LONGER SUPPORTED AND THEREFORE STOPPED WORKING. PLEASE REPLACE PLUGIN WITH FOLLWING:

Go¬†to Plugins and Add New – search for the ‘Social Photo Feed’ plugin by smash balloon ¬†and activate it. ¬†Navigate back to your WP dashboard and locate the plugin on the left hand side menu near bottom => INSTAGRAM FEED. Click on it to start setting up the plugin.

  • We’ll start with the configure tab where we will connect the plugin with¬†your Instagram account via the Instagram Access Token. This is needed & required by Instagram to authorise the display of your feed on your blog / website. ¬†To generate the access token please visit this site and follow the steps to create your access token (long string of numbers and alphabets). Click on the ‘manually connect your account’ button and paste the access token into the required field. Save your progress!

 

  • Now we will style the Instagram gallery so it will look exactly like the demo version. For this please click on the customise tab of your plugin (next to configure tab). At the general section the width of the widget is automatically set 100% and you don’t need to do anything further. Leave height blank. Next set the number of images you like to display in your Instagram gallery. Depending on your theme please set a number and also define the number per columns. For example when the number of images is 12 set the number of columns 6 – this is create 2 rows. Also important please leave the ‘padding around images’ blank or zero value. Please tick the box ‘disable mobile layout’¬†in order to make the Instagram widget responsive and mobile friendly! Another important thing is to uncheck all the unnecessary check boxes like header, load more and follow buttons. We want the widget to look slick and minimal. Don’t forget to save your changes.

 

  • After we’ve prepared the plugin and set it up correctly we can now integrate the Instagram Feed onto your blog / website. Please navigate to APPEARANCE => WIDGETS and drag a Custom HTML widget to the designated widget area you like to display it. Type in your title and copy paste flowing code into the value field: [instagram-feed].¬†Don’t forget to save the changes. Voila your Insta Feed is back online!

EXTRA SOURCE: Since this is a very recent change and not all MPS Themes have been updated yet, please add this little extra code snippet to your ADDITIONAL CSS panel. This is will solve the issue with the ugly gap between widget bottom and footer area. Navigate to APPEARANCE => CUSTOMISE => ADDITIONAL CSS and copy paste following code:

#sb_instagram #sbi_images {margin-bottom: -60px;} 
As always don’t forget to save your changes!¬†This should do the work for the time being.

Pro Tipp: We recommend  the number of posts to be at least 12!  (recommended for two rows: 12).

 

Was this article helpful to you? Yes No

How can we help?