This tutorial will show you how to embed Instagram widget on WordPress based website. It does not require any additional plugins installed.

Disclaimer! This tutorial will work only on stand-alone WordPress installation. It will not work on wordpress.com websites unless you have Business or eCommerce plan! Please read the last chapter of this article to learn more.

Step by step instructions for Gutenberg editor

This tutorial does not show how to install WordPress. We assume that you already have working installation. If you don’t have WordPress installed, please install it first on your server. You can find some instructions on this page – how to install WordPress?

We will show you two different methods – one will use Gutenberg and one will use WordPress widgets.

Step 1 – login to your WordPress dashboard

Screenshot of WordPress login panel

First you need to login to your WordPress admin panel. Make sure that you will log in as an user that has access to adding/editing posts or pages.

Step 2 – add custom HTML block

Screenshot showing Custom HTML block in Gutenberg

First we will show you how to add Instagram widget via Gutenberg editor. Gutenberg should be working on WordPress Posts and Pages. You can create new page/post or edit existing one. In our case we will create new post.

From the list of available Gutenberg blocks please select Custom HTML block.

Step 3 – paste widget embed code

Screenshot showing Custom HTML Gutenberg block with our widget embed code

You should see the input where you can paste custom HTML. Please paste your widget embed code. In this example we will use our demo widget code. You should use your own widget embed code. If you don’t know what is your code, please read this tutorial – Where can I find my widget embed code?

Please click Publish or Preview button to see how the widget will look like on your page.

Example showing how the embedded widget looks like on WordPress page

Step by step instructions for WordPress widget

You can also embed our widget into WordPress widget block. This is good alternative if you want to place the widget in footer or if you don’t use the Gutenberg editor.

Step 1 – login to your WordPress admin panel

Screenshot of WordPress login panel

It’s the same step as for adding our widget via Gutenberg. You need to be logged in to your WordPress admin panel.

Step 2 – create new WordPress widget

Screenshot showing adding new WordPress widget

From the Appearance menu please select Widgets. Drag and drop Custom HTML widget to desired section.

You can write a title for your widget, in our case it’s Follow us on Instagram.

Please paste the widget embed code into the Content field. Again, we used our demo widget but you should use your own widget embed code.

Click Save button and the widget will appear on your website:)

WordPress.com issues

As we mentioned at the beginning of this tutorial, our widget will not work on WordPress.com websites. Please don’t confuse wordpress.com and wordpress.org websites.

  • wordpress.com is a fully hosting service created by the co-founder of WordPress
  • wordpress.org is a place where you can download WordPress code and install it on your server

Websites hosted on wordpress.com has various plan and each one have some limitations. You can see the pricing page that will show you the differences between the plans.

By default adding custom JavaScripts and Iframes which our widget is based from is blocked. If you will paste our widget embed code you will not see any result on your website. List of particular elements that are blocked can be found here: https://wordpress.com/support/code/

You will be able to install our widget only on plans that allows installation of custom plugins. At the moment there are only two plans that allows that: Business and eCommerce plans.

Comments (0)

You must be logged in to post comments.