fbpx
wordpress-plugin-ditty-metaphor-creations

Adding an Instagram Feed to WordPress with Ditty


Introduction

In this episode, we’ll cover how to add a basic Instagram feed to your website using the Ditty Instagram Plugin.

Installation and Setup

Install Ditty and Ditty Instagram

  1. Ensure Ditty is installed on your site.
    • In your WordPress dashboard go to Plugins > Add New and search for Ditty.
    • Click Install Now for the Ditty plugin.
    • After installation completes, click Activate.
  2. Download Ditty Instagram from your account on metaphorcreations.com.
  3. Go to Plugins > Add New, click Upload Plugin and install Ditty Instagram.
    • Don’t forget to Activate the plugin as well!

Activate License

  1. Navigate to Ditty > Ditty Extensions.
  2. Enter and activate your license key in the Instagram panel.

Configuring Instagram with Ditty

Authorize Instagram

  1. On the Ditty extensions page, click on the Oauth tab in the Instagram panel.
  2. Click the Authorize Instagram button.
  3. You will be taken through a few steps, including logging into your Instagram account, and ultimately end back up on the Ditty Extensions page on your website.
  4. Once authorized, your username will appear on the site.

Setting Up Your Feed

  1. Go to Ditty > Add New and create a new Ditty
  2. Add a Ditty name for easy identification.
  3. In the side panel (Ditty Editor), select Instagram feed.
  4. Select Add Instagram Feed at the bottom of the editor.
  5. You will be presented with Instagram Feed settings. Some options you can adjust are:
    • Filter by Post Type.
    • Set the number of posts to show.
    • The Links and Customize tabs provide additional options related to the Layout of your Instagram feed items.
  6. For this tutorial we are going to leave everything as the default settings.
  7. Click Update Item Settings to save the default settings.

Customizing the Instagram Feed

Basic Display Settings

  1. By default, the feed displays as a list.
  2. Set the number of posts to show.
  3. Option to disable the video carousel.
  4. Filter by post type if desired.

Creating a Ticker

  1. By default, the feed displays as a list but we are going to switch it up to a News Ticker.
  2. Navigate to the Displays tab and select Ticker.
  3. Adjust the ticker settings to fit your needs. For this example we will:
    • Set max width of images to 250px.
    • Change the speed and spacing of the ticker.
    • Add border radius for a stylized look.

Saving and Adding to a Page

  1. Save your customized Ditty settings by clicking the Save Ditty button on the top right of your screen.
  2. Add the Ditty to a page:
    • Use the Gutenberg block for Ditty, if using Gutenberg.
    • Alternatively, use the shortcode generated by Ditty.
    • Insert the Ditty block or shortcode on your homepage or desired page.

Conclusion

  • You now have an Instagram feed displayed on your site.
  • It’s quick and simple to set up.
  • Feel free to reach out with any questions.