Adding your Instagram, Facebook or Twitter widget to your Pubvana 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.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along we will explain the difference.
Pubvana allows you to add your widget in the following ways:
Add Custom HTML to your page or blog post.
Use the HTML widget to add your Custom HTML to your page. Please note that the HTML widget will be added to all pages and you only have 4 areas where it can be added. The width of the widget will also depend on the width of the area you selected. More info regarding the HTML widget at the end of this tutorial.
In this tutorial we will cover all available options to add your SnapWidget to your Pubvana website.
Start
Log in to your Pubvana website.
Under Admin, select Dashboard.
In the left sidebar, click on PAGES and select the page you want to add your widget to by clicking on Edit Page for that Page.
The 2 pages that we have created for this tutorial are empty except for the Title.
Adding your snippet to your pages with Custom HTML.
Add your snippet in the Page Content block.
Click on Save Page (make sure the Page Status is set to Live, else the changes won’t be published).
The widget will now be displayed as follows on your website.
The widget uses 100% of the available space. If this is what you want to see, skip the next part of the tutorial, else read how we can change the way it is displayed. Note that the widget is responsive (will change size on smaller displays).
We can change the width of the displayed widget by changing the iframe width to e.g. 75%:
The widget will now be displayed at 75% but it will be left-justified. To center-justify it (or even right-justify if you want to) we will encapsulate the widget in a <div> area with the text-align attribute set to center (or right). Note that the widget stays responsive.
In the above we worked with the Grid Display widget. Adding the Slideshow widget is the same procedure but the way the widget displays on the website differs (width, height as well as justification).
If you added your responsive Slideshow snippet to your page it will be displayed as follows:
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. As with the Grid display, 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 to 200px each.
We are now 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:
And displays as follows on your web page.
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: 30%; margin: 0 auto;”>(this sets the Wrapper to 30% of available width and center-justified. With this width setting we can change the width of the snippet to any width we want)<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. Note that the widget stays responsive.
The widget is also responsive (change the width of your browser to check).
The same procedure applies when you add your snippet(s) to a blog post.
Adding your snippet to your pages with the HTML Widget.
Please note that if you add your widget to your page with the HTML Widget it will be displayed on all pages, you cannot select to only display on certain pages. The Grid Display widget will also be displayed very small making it very difficult (actually impossible) to click on an item to be displayed in the Lightbox. To overcome this you can change the width of the widget to > 150%. For the Slideshow display (with the standard responsive widget) there is no need to change the width, the widget will be displayed properly.
In the left sidebar, click on Widgets and select the HTML widget. Click on the Add to… dropdown and select the area you want to add your widget to.
If we select e.g. the Home Left area, the screen will display the following:
Click on the Inactive dropdown button.
Enter the required info.
Enter a proper title for the widget, e.g. Grid Display.
Select Show Title if you wish the Title to be displayed with your widget in the HTML Widget.
Enter your snippet in the Content area.
Select Active to make the widget active.
Click on Save.
This will display the following on all pages.
On a Grid Display page.
On the Slideshow Display page.
As mentioned above, the width of the widget (in this case set to 100%) is too small to allow clicking on any item in the widget. We found that changing the width of the iframe to at least 150% allows for proper display.