How do I add an Instagram widget to my Tumblr blog/website?

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

For this tutorial we have used the Tumblr Official default theme.

Tumblr does not allow complete Custom HTML to be entered in a blog post or on a page.

Your SnapWidget snippet consists of a link to a CSS file, links to 2 JavaScript files as well an iframe. It allows the iframe but filters out the other links.

To setup Tumblr to allow you to add these links we will have to add some code to the theme HTML file. This is applicable to any of the themes available in Tumblr.

A. Set up Tumblr to allow you to add Custom HTML.

As mentioned above, Tumblr does allow iframes, thus the iframe part of your widget snippet is allowed, i.e.,

<iframe src="https://snapwidget.com/embed/xxxxxx" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border: none; overflow: hidden; width:100%; "></iframe>

But not the other links, i.e.,

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

Open your widget snippet in your favourite editor, e.g., Notepad++, and take note of the .css and .js file links as shown above.
Edit the theme Html file to add the calls to the js files and the css files (Linking External Files to Tumblr).

Please note:
The CSS file and both the JavaScript files are hosted on the SnapWidget CDN and will always be the latest version. You will never have to update the code or the URL to these files.
Select the blog you want to edit/modify under Account.
Click on Blog settings in the right sidebar.
This will display all the settings you can edit/modify on your selected blog.
Scroll down in the displayed dialog until you find Custom Theme. Make sure to enable ‘custom theme’.
Click on Edit theme to open up the editor to allow you to edit/modify your theme.
At the top of the left sidebar, you will find an Edit HTML option to open up the theme HTML file.
Click on Edit HTML to display the contents in edit mode. The file contains in the region of 2200 lines.

Please Note:
If you make changes to this file you could accidentally totally screw up your Tumblr website/blog. To enable you to restore the file in case of a hiccup, create a coppy of the contents. Select and copy the total contents of the file (use Ctrl+A, Ctrl+C for Windows and Linux or command-A, command-C for MacOS).
Open up your favourite editor and paste the selected text into the editor. Save the file with an easy to remember name on an easy to find location on your computer. You can then use this to restore the HTML file.
Adding the lines to the theme HTML file.
- CSS (.css) files
```
<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
```
  Add the code just above the </head> closing tag in your Tumblr theme HTML file.
- JavaScript (.js) files
```
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<script src="https://snapwidget.com/js/snapwidget-lightbox.js"></script>
```
  Find the </body> tag at the end of your Tumblr theme HTML file, and just above it, paste the code for both lines.
Click on Update Preview to have a look at what the changes will look like (Note that you will only see changes if the preview part displays items that would be affected by the mods). To save the mods, click on Save.
Use the back arrow on the top left of the menu bar to exit the HTML file editor.
Click on Exit in the top left of the Edit theme page to exit and return to your blog.

B. Set up the editor in Tumblr to allow you to add Custom HTML

For pages in your Tumblr website as well as blog posts, you will only add the iframe line (as shown above) but to be able to do this you will have to set up the editor to Plain text/HTML.

Note: This setting will be a global setting for your Tumblr account, not for a specific blog or website.

Click on Home in the left sidebar and select Settings
Click on Dashboard in the right sidebar.
This will display all the global settings you can edit/modify.
Scroll down in the displayed dialog until you find Text Editor and select Plain text/HTML.
To exit the Dashboard, click on Home in the left sidebar.

C. Adding your snippet to a Tumblr website page.

As mentioned under point 1, select the blog you want to add your snippet to. In the Edit appearance display scroll down and select Edit theme under Custom theme.
Scroll down on the Edit theme list (left sidebar) until you find THEME OPTIONS. For the purpose of this tutorial, we have set the Layout to ‘Wide’.
Scroll down to the bottom of the list and select the page you want to add your widget to.
This will display the Page editor where you can insert your snippet.

Note: Insert only the iframe part, leave out the links to the CSS and JavaScript files).
Click on Update Preview to display a preview of your widget in the right panel of the split screen.
If you are happy with the result, click on Save to save your Tumblr page.
The page will now be displayed as follows on your live website.
If you click on any of the items in the grid, it will display the item in a lightbox. If it doesn’t display as shown below (with your own image 😊), double check the information you added to your them HTML file as shown under point 1 above.

D. Adding your Slideshow widget.

The process of adding the Slideshow Display widget is the same as the Grid Display widget. The major difference that could be addressed is the fact that the Grid contains more than one static image and the Slideshow displays only 1 image at a time.
If you add your Responsive Slideshow widget to your page it will be displayed as follows.
The widget is displayed with an iframe width of 100% but it is left justified. You can’t change the width nor the justification with the standard Responsive Slideshow widget. If this layout suits you, 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. Although the thumbnail size (in px) is important because it will be used in the iframe width and height setting in your snippet, you can change this in the snippet itself. This change will then only be applicable to this Tumblr instance of your widget. If you use your widget on any other website (CMS, E-Commerce or Blog) it will still utilise the Thumbnail setting as set up on your SnapWidget dashboard.
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:
With the iframe width and height setting to 200px, your widget will be displayed as follows.
Make the following changes to the snippet.
- Add 2 <div> areas with the following styles (the ids 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: 55%; margin: 0 auto;”>
```
  This sets the Wrapper to 55% 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 < 55% the social media buttons won’t be displayed properly on the images and you won’t be able to click on an image to display it in a lightbox.
```
<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 following attributes.
```
left: 0; width: 100%; height: 100%; position: absolute;
```
This will then display the widget as follows with the ‘Wrapper’ width set to 55%. The widget will also be responsive.
If you click on any of the items in the grid, it will display the item in a lightbox. If it doesn’t display as shown below (with your own image 😊), double check the information you added to your them HTML file as shown under point 1 above.

E. Adding your widget to a Blog post

Unfortunately, Tumblr does not allow you to add iframes to a blog post, but you can add your widget to your blog in a few places, i.e., before the first post below the navigation menu, after the last post above the footer as well as in the sidebar, but this can only be added to the theme HTML file (similar to what we had to do above for adding the CSS and JavaScript files).

Please note: If you use any of these 3 options, the widget will also be displayed on the pages we worked on in the previous sections. Most probably this doesn’t make any sense, but let’s go through it.

Open up your theme HTML file, but please take note of the backup procedure we discussed earlier because we are going to make changes to the theme HTML file again.
To display the widget in a better format, we can add a few tags to the snippet:
Insert your widget before your first post
- Search for the following line in the HTML theme file (should be at ~ line 325):
```
<section id="posts" class="content clearfix {block:HideTitle}{block:HideDescription}no-title-desc
```
- Insert your snippet just below this line (Tip: add a <br/> tag at the end of the snippet to insert a break between the widget and the post).
- Click on Update Preview to preview your changes in the preview pane.
  
  Note: that the widget is responsive, the preview will display the page based on the width of the preview pane so the widget could appear narrower than on the actual site.
- This will display as follows on your blog page (before any posts, but after the navigation line).
Insert your widget after the last post
- Search for the following line in the HTML theme file (should be at ~ line 1479):
```
</div> 
```
- Insert your snippet just above this line (Tip: add a <br/> tag at the beginning of the snippet to insert a break between the widget and the last post).
Insert your widget in the sidebar (Note: this will be displayed very small!)
- Search for the following line in the HTML theme file (should be at ~ line 1479):
```
<div class=”sidebar”>
```
- Insert your snippet just after this line.