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.

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.
   • If you have a license to Ditty Everything, you can download the plugin from the Ditty Downloads page: https://www.metaphorcreations.com/ditty/downloads/
   • If you purchased Ditty Instagram individually, you can download it from your Account page: https://www.metaphorcreations.com/customer-dashboard/file-downloads/
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.
   • If you have a license to Ditty Everything, you can find your license code on the Ditty Downloads page: https://www.metaphorcreations.com/ditty/downloads/
   • If you purchased Ditty Instagram individually, you can download it from your Account page: https://www.metaphorcreations.com/customer-dashboard/license-keys/

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.

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.