Drupal

If you want to install our responsive Instagram widget into your Drupal 8 website, here is the guide how to do that. This tutorial does not require any additional modules to be installed in your Drupal website.

Similar way (using Blocks) can be used on Drupal 7 and Drupal 6 based websites.

Step by step instructions

This tutorial does not show how to install Drupal. We assume that you already have the working installation. If you don’t have Drupal installed, here you can find tutorial that will help you out setup your server and Drupal site – How to install Drupal? For the purposes of this demo we will use Drupal Umami Demo from simplytest.me.

Step 1 – login to your Drupal admin panel

First of all you need to log in to your account on your Drupal website. Make sure that your user has permissions to configure Block section.

Step 2 – add new block

Our widget will be placed in custom block. In order to create a new block, from the top menu of your Drupal admin menu please select Manage and Structure. You should see the list of different structures. Please select Block layout. There should be two tabs, select Custom block library and click Add custom block button.

You should see the page with list of available blocks. In our example we will use Basic block.

Step 3 – paste our widget embed code

Now it’s time for the configuration of custom block. There are couple of important options that needs to be set.

First you need to add the block description. You can use any text you want. We named our block – LightWidget Instagram widget. This is just the general name of the block, you can set different title of the block later on.

Before pasting the embed code please make sure that from the Text format dropdown you will select Full HTML. Setting this option will ensure that entire embed code will be present on your website.

Next click Source button in top right corner of Body block and you are ready to paste the widget embed code. For our purposes we are using one of our widget embed codes. You should use your own embed code here instead. If you don’t know where to find your embed code please follow the tips in this tutorial – Where can I find my widget embed code?

Please click Save button on the bottom of the page to save changes.

Step 4 – add the block to your Drupal website

It’s time to place the newly created block on your website. Please select from your admin menu Manage, Structure and Block layout. You should see the list of the regions where you can place your block. For our purposes we will use Content region. Please click Place block button next to the region where you want to place your Instagram widget.

From the list please select the block you’ve created. In our case it is LightWidget Instagram widget. You can use filtering to find your block. Please click Place block next to the block that contains the embed code of your widget.

You can change the title of the block to something like “Follow us on Instagram”. Once you will be happy with the configuration, please click Save block button.

Your widget should be visible on your frontpage!