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
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
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
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.
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
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
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:)
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.
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.