Adding your Instagram, Facebook or Twitter widget to your Blogger 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 website.
Note: Using Blogger, you can add your widget to a static page or a blog post. For this tutorial we will use the Dynamic Views - Classic theme. In the first part of this tutorial, we will add your widgets (both Grid and Slideshow) to a static page.
We have created 2 pages, i.e., Grid Display and Slideshow Display. We won’t go into creating pages, but you can read here to assist.
A. Note on Blogger handling Custom HTML code (specifically external CSS files).
When editing the page contents to add your widget snippet code, you must select the HTML View option on the editor toolbar.
When you switch back to Compose view, it complains about the content of your code snippet not being valid.
Blogger doesn’t like entries for external CSS files. Your widget snippet code contains one (1) link to an external .css file on our Snapwidget CDN:
Although Blogger complains about the
link rel=entry, it actually converts the line to
and then marks the added closing
</link>tag as an error
It does however not cause an error when displaying your widget. You can click on the Preview button (top tight) to preview the display.
B. Let’s start adding our widgets!
Log into you Blogger account and on your dashboard select Pages in the left side-bar.
Select the page you want to add your widget to.
The editor will now be displayed. Make sure the HTML view is selected and add your snippet code where you want it to be displayed. In our case it will be at the start of the page HTML.
Click on Preview to preview your page or Update to update your published page.
If all went well your page should display as follows.
As seen above (if you entered the standard responsive pro grid widget with an iframe width set at 100%), the widget will be displayed filling the whole available width.
If you change the width to e.g., 50%, it will display as follows.
It displays smaller, but left-justified. If you want to set the justification of the widget to centered you will have to add some additional HTML code.
Add a <div> block encapsulating the iframe code. The “
width: 75%; margin: auto” setting of the <div> style will set the width of the <div> block to 75% and centered on the page. With this setting we will leave the iframe width set to 100%. This will set the width of the iframe to 100% of the width of the <div> block.Please note - if you make the width too small then you won’t be able to click on an item in the grid and your social media buttons will also not be displayed properly.
This will then display the widget as follows.
If you click on any of the images in the slideshow it will be displayed in a lightbox.
C. Slideshow Display
The process for adding the snippets is the same for both widget types.
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.
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.
Make the following changes to the snippet.
Add 2
<div>blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).<div id=”Wrapper” style=”width: 50%; margin: 0 auto;”>(this sets the Wrapper to 50% of available width and center-justified. With this width setting we can change the width of the widget to any width we want).Please Note - As with the Grid display, if you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly.
<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 to 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.
The widget will then also be responsive.
If you click on any of the images in the slideshow it will be displayed in a lightbox.
D. Adding your widget to a blog post
Adding your widget to a blog post follows the same process as when you add it to a static page.
Select NEW POST on the left side-bar
This will open the post editor and allow you to start a new blog post. Similar to adding your widget to a static page, add the blog post title, make sure HTML view is selected and insert your snippet code into the editor text box.
If necessary, make changes to the blog post settings, i.e., Labels, Published Date & Time, etc. under Post settings.
Click on Preview to preview the post or Publish to publish the post to your blog.
Your post will be displayed as follows.
All other settings as described above, i.e., justification and width (size) are applicable in exactly the same manner as for adding your widget to a static page.