Adding your Instagram, Facebook or Twitter widget to your Drupal 8 website is easy. Follow these steps to create your widget.

Once you've created your widget, follow the appropriate steps below to add it to your website.

NB! First things first - Drupal 8 uses the CKEditor to allow editing article, page and block content. There are a few options that you have to set up to allow Custom HTML such as <script>, <link> and <iframe> tags. If you do not set this up the editor will just strip these out of your snippet. 

1. Log in to your Drupal 8 website. 

2. Set up CKEditor to allow Custom HTML.

  • On your Dashboard, select Configuration on the Admin toolbar.

  • Under CONTENT AUTHORING select Text formats and editors.

  • In the NAME column, move the Full HTML set to the top of the list and click on Save. This will set the Full HTML option as the default selection when editing content.

  • Click on Configure under OPERATIONS to configure the Full HTML set.

  • On the setup page for Full HTML make sure that Administrator is selected under Roles.

  • To allow proper formatting during content editing (when you insert your snippet) make the following changes to the Editor Toolbar under TOOLBAR CONFIGURATION.

  • Below is a possible original Toolbar layout (this depends on how Drupal 8 was set up / used before you started adding the SnapWidget snippet).

  • Add the following items to the Active toolbar if not already added. (Drag the items from the Available buttons group onto the Active toolbar).

  • The Active toolbar should now have the following items available.

  • Under Enabled filters make sure the Limit allowed HTML tags and correct faulty HTML option is NOT selected.

  • Click on the Save configuration button at the bottom of the Configuration page.

  • CKEditor has now been set up to allow adding Custom HTML in any Content area on your Drupal 8 website.

3. Adding your widget to your website.

Drupal 8 uses blocks to display content rendered into an area, or region, of a web page (such as "User Login" or "Who's online") that can be displayed in regions (such as content, footer or sidebar) on your page.  

Drupal 8 also allows the creation of Custom blocks, i.e. it allows the user to create blocks with Custom content which makes displaying your widget a lot easier.

See Working with blocks and Block module for documentation regarding the use of blocks in Drupal 8.

Note: In this tutorial the Drupal 8 website has been set up with the Bootstrap 8.x-3.11 theme. The process for adding your snippet with other themes such as the default Bartik 8.5.1 theme is exactly the same. The only difference will be in the resulting displayed website. 

This website has 3 pages, i.e. Home page (referred to as node as well as Frontpage), an About Us page and a Contact page. We will only add the widget to the Home page and the About Us page to show the difference between the two processes.

Adding your widget to the Home page.

Adding your widget to the Home page (Frontpage) is done by creating a Custom block containing the snippet (together with any other Custom HTML code) and placing this block in the Block layout option on the Home page.

  • On your Dashboard select Structure.

  • Select Block layout.

  • Select the Custom block library tab.

  • Click on +Add custom block.

  • Enter the Block description. This will also be the name of the block used to identify it. We will call it Front Page.

  • Create a Header in the Body. Type some text as the first line (in this case Our Products, change the format to Heading 1 and set the alignment to Center. Add a blank line after the Header.

  • Make sure Text format is set to Full HTML (as set up for CKEditor at the start of this tutorial).

  • Now we will enter the snippet for your widget. On the editor toolbar, click on the Source button. This will allow you to enter HTML code. You will see that the previously entered Header is now displayed in HTML code.

  • Insert your snippet below the last line displayed in the Body. You can set the iframe width to a different value if you don’t want it to fill the whole width of the area you place the widget. For this tutorial we have set the width to 75% (this won’t change the width of your widget as set up on your SnapWidget account dashboard, it is only applicable to this instance). We will also center the widget on the page.

  • Click on Source again to return to normal editing mode. The widget will be displayed as left aligned (refer to the Header that is center aligned).

  • Place your cursor to the left before the widget and click on the center button as you did when you centered the Header above.

  • Click on Save to save the Custom block.

  • Your newly created Custom block will now be listed under Custom block library as Front Page.

  • Select the Block layout tab

  • Scroll down to find the Content area and click on Place block.

  • A modal page will appear with all blocks available. Search for the Front Page block and click on Place block.

  • On the Configure block modal page, uncheck the Display title option. If you leave this checked the title (in this case Front Page) will also be displayed in the area where you place this block. If you want to display the title leave it checked.

  • Under Visibility select the Pages option to set the page on which the block should be displayed. Add  in the Pages text box and make sure the Show for the listed pages option is selected. This will add the block to only the Home page.

  • Select the Region where you want to display the block. This could be any of the regions as displayed in the list. For the tutorial we will use the Content region.

  • Click on Save block.

  • On the Block layout page you will see the new Custom block called Front Page listed under the Main page content block. Click on Save blocks.

  • Your website Home page should now display your widget as follows.

Adding your snippet to the About Us page.

  • Adding your widget to the About Us page is done by creating a Custom block containing the snippet (together with any other Custom HTML code) and placing this block in the Block layout option on the About Us page.

  • Prepare your Custom block the same way as you did for the Home page. The only difference will be where you enter information above the widget. In this case we will call the block About Us. Here we have also added a single line explaining what we do.

  • Click on Source and enter your snippet below the last line.

  • Follow the same process as for the Home page to add your About Us custom block to the About Us page. The page to enter under Pages will now be /about.

  • Click on Save block. The Block layout page will now be displayed. 

  • Click on Save blocks.

  • Your website About Us page should now display your widget as follows.

Did this answer your question?