Adding your Instagram, Facebook or Twitter widget to your ClassicPress blog 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.
A. Overview
Theme
In this tutorial we will look at the Make theme. On the Edit Page screen, under Page Attributes in the right side-bar, you will see a choice of two templates, Default and Builder. The Default template spans the whole width of the available content area, but 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.
You can add your widget to any of the footer areas and sidebars but these are not the best places to add them, the areas are very small and especially the grid widget does not display well in such a small space.
Selecting the Theme template
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 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 Editor
The default editor used is the Classic editor which provides a Visual and a Text option.
Limitations of the Editor
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.
As a work around for this issue, we will have to provide the link to the external snapwidget-lightbox.css file via the Additional CSS option.
Please note! 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 your 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 external 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.
B. Let's Start
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 themes is exactly the same.
Log in to ClassicPress 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).
C. The Grid Display
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. You can preview what the widget will look like by selecting the Visual option. Just remember that during this switch, it will remove 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 to greater than 100% will have no effect but reducing it will reduce the size of the widget and display it left justified. Just 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.
D. The Slideshow Display
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.
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: 40%; margin: 0 auto;”>This sets the wrapper to 40% 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 < 40% 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 40%. The widget will also be responsive.
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 40% 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 (Refer to the overview at the beginning of this tutorial). 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.
The above was done on static pages. The process of adding it to your blog posts is exactly the same.