Note: This tutorial only applies to wordpress.org installations as wordpress.com does not support the use of iframes. It also applies to WordPress installations done on self-hosted sites by means of e.g. Softaculous. It also applies to Bitnami (or any other) OVAs for VirtualBox / VMWare.

Adding your Instagram, Facebook or Twitter widget to your WordPress 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 blog.

Overview

Although the management of different WordPress themes doesn’t fall in the scope of this tutorial, I feel that due to the different natures of these themes a short overview will be in order. Due to the fact that WordPress provides a variety of themes (all with different templates) we cannot cover all available themes but the process of adding you widget is more or less similar on each theme with some small variations.

In this tutorial we will look at three of the most popular themes, i.e., Make, Twenty Ten and Twenty Twenty-One. On the ‘Edit Page’ screen of each of these themes, you will see a choice of templates. All themes have a Default template. Although the Default template spans the whole width of the available content area, if you have enabled the sidebars then they form part of the available content area and will be hidden if you increase the width of your widget to extend beyond 100%. This is best established by trial and error.

Although you can add your widget to any of the footer areas and sidebars, the areas are very small and especially the grid widget does not display well in such a small space.

The Make theme -

The Make theme includes the Builder template which provides 3 predefined areas on your page (other than sidebars and footers). These are Content, Banner and Gallery.

If you are using the Builder template then the Content area is normally used to add your widget. It consists of minimum 3 columns.

These columns can be used separately but cannot be changed in width. This must be kept in mind when inserting your widget. If you need more columns, click on the + Add new item. This will add another column on a following row.

To remove a column or add/edit the content of a column, click on the ellipsis (…) and select the appropriate action.

Adding your Grid widget to one of these columns causes the display to be very small even if you have the iframe width set at 100%. The SlideShow display looks OK but due to the size limitation (max ⅓ of the total available display width) the Social media buttons are not displayed properly.

The Twenty Ten theme -

The Twenty Ten theme has 1 additional template, i.e. “One column, no sidebar”, which is similar to the Default template but without any sidebars (even if they were enabled).

The Twenty Twenty-One theme -

The Twenty Twenty-One theme has only a Default template with no choice of other templates.

The editor that will be used is the Classic editor which provides a Visual and a Text option.

Switching between these options removes the line that calls the snapwidget-lightbox.css file.

<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />

If this call is removed, clicking on an image (Grid or SlideShow) won’t display the selected image in the lightbox. Make sure the snippet is complete before you publish your modified page or apply the following work around.

As a work around for this issue, we will have to provide the link to the snapwidget-lightbox.css file via the Additional CSS option. This is applicable to the Grid and the SlideShow widget.

Just note that this is applied per theme, so if you change the theme for your website (or update an existing theme) you will have to add it again.

Move you mouse over Appearance in the left sidebar menu and click on Customize.

On the Customize page, click on Additional CSS.

Copy the URL from the line that calls the snapwidget-lightbox.css file,

<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />

and insert this in the Additional CSS input text box in the following format:

@import url("https://snapwidget.com/stylesheets/snapwidget-lightbox.css");

This refers to the CSS file hosted by SnapWidget, so if we make any changes to the contents you will always have the latest version running.

Click on Publish to publish the CSS code. When done, click on X to close the Additional CSS input text box and return to your Dashboard.

For this part of the tutorial we will look at the Default template of the Make theme. The process for adding your snippet using any of the other mentioned themes is exactly the same. We will look at them at the end of this tutorial.

Log in to WordPress and go to your Dashboard.

The current theme will be displayed under At a Glance.

Select Pages on the left sidebar menu.

On the Pages screen (on all themes), find the Page you want to edit, then hover your mouse over the page title to display the options menu and click on Edit (not Quick Edit).

Make sure the Text option is selected and insert your snippet in the text box. You can preview what the widget will look like by selecting the Visual option. Just remember that during this switch, it will remove the line that calls the .css file.

Click on Update to update the contents of the page.

Your widget should now display as follows on your website.

Changing the width of the iframe will change the size of the widget, but make sure that you don’t make it too small else your social media buttons won’t be displayed and you won’t be able to click on an item to display it in the lightbox display.

Setting the width to 75%.

If you click on any of the images in the Grid display, the image will be displayed in a Lightbox.

Select the page you want to add the widget to.

Make sure the Text option is selected and insert your snippet in the text box. As mentioned before, you can preview what the widget will look like by selecting the Visual option.

Click on Update to update the contents of the page.

If you added the snippet for the responsive SlideShow, then your widget should now display as follows on your website.

The widget will be displayed at 100% and left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. If this is what you want just skip the next steps.

To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.

Create a non-responsive widget on your SnapWidget dashboard. The width and height are not important, you can set them e.g. to 200px each.

We are going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:

This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.

The standard non-responsive widget snippet contains the following:

Make the following changes to the snippet.

Add 2 <div> areas with the following styles (the id’s are just for explanatory purposes for this tutorial, they are not used for any other purpose so you can actually leave them out).

<div id=”wrapper” style=”width: 100%; margin: 0 auto;”>

This sets the wrapper to 100% of available width and center-justified. With this width setting we can change the width of the snippet to any width we want but please note that if you make the width < 60% the social media buttons won’t be displayed properly on the images.

<div id="container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;">

This sets the area used to display the iframe at 100% of the wrapper width as well as height = 100% of the width.

Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;)

This will then display the widget as follows with the ‘wrapper’ width set to 100%. The widget will also be responsive.

Please note that the title (The SlideShow) was added and center-justified to indicate that the placement of the widget is also center-justified in the available area.

Changing the ‘wrapper’ width will change the size of the widget, but make sure that you don’t make it too small else your social media buttons won’t be displayed and you won’t be able to click on an item to display it in the lightbox display. Keep this width to 60% or greater. This depends on the chosen theme.

If you click on any of the images in the SlideShow display, the image will be displayed in a Lightbox.

If you plan to use the Builder template of the Make theme, then the display would look like the following. The Grid display was added to column 1 and the SlideShow display to column 2. The width in both cases was set to 100%. Column 3 was not used.

Theme Twenty Ten.

Inserting your snippet for the Grid and the SlideShow display is the same as for the Make theme.

If you use the Default template, your Grid widget will be displayed as follows (width set to 100%).

And the SlideShow widget (width set to 60%) …

If you use the ‘One column, no sidebar’ template, your Grid widget will be displayed as follows (width set to 100%).

And the SlideShow widget (width set to 60%) …

Theme Twenty Twenty-One.

This theme has only one template, the Default template, but it includes no sidebars.

Your Grid widget will be displayed as follows (width set to 100%).

And the SlideShow widget (width set to 25% - note that the Twenty Twenty-One theme has a wider available area and therefore the minimum width is lower than the other mentioned themes) …