How to Add Your Instagram Widget to Tumblr

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

ADVERTISEMENT

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Tumblr is a microblogging platform and social networking website primarily centered around media based content.

Hence it makes perfect sense to complement your Tumblr blog with your pictures and content from Instagram.

As you already know, Instagram is the preferred platform where people enjoy to share images and photographs.

This is mostly because the social media network is filled with amazing photo effects which you can use to easily enhance your images and make it seem like they have been clicked by professionals.

SEMrush Banner
ADVERTISEMENT


Tumblr, on the other hand, has been steadily gaining in popularity and currently has something over 400 million blog accounts.

A whole barrage of people uses it on a daily basis to share media content like pictures, quotations, videos, and so on.

Are you seeing a connection yet? If you have a Tumblr blog then you can complement with all the high-quality images that you have posted on Instagram.

The main question here is what is the most convenient means of doing this? And the answer is by using Instagram widgets for your Tumblr blog.

By adding an Instagram Widget, you will be able to automatically display your Instagram images directly onto your Tumblr blog.

Now, there is no default method to help you install an Instagram widget to your Tumblr. However, it can be easily achieved with the help of some third party tools.

Here, we will be using Snapwidget, and see how it can help you to showcase your Instagram images directly to your Tumblr. It is an online tool that helps users to display an Instagram gallery onto their websites.

Using the tool, you will be essentially creating a widget by just filling in your username and preferred parameters for the widget.

The tool will then generate a code snippet which you can embed on to your website or blog to integrate an Instagram widget that will pull in your latest Instagram uploads and update itself every 30 minutes.

Now, do note that we stated the tool is used for adding an Instagram gallery to your website. So how can it help you to add it to your Tumblr account?

 Well, that is what we will be discussing. So without further ado, let’s get started:

Quick Way To Add Your Instagram Widget to Tumblr

If you want to add an Instagram widget, the first thing you will have to do is create one widget. Here are some easy to follow steps that can help you create an Instagram widget on Snapwidget:

Creating an Instagram Widget:

  • Create an account with Snapwidget and login to get to the dashboard. Here you will find the Create A New Widget button.
  • A list will appear containing options for all the possible widgets. For the purpose of this guide, we will use the Free Instagram Grid Widget. Once you have selected that, click on the Create A New Widget button.
  • You will now have to link your Instagram account. You can do this by simply clicking on the + button.
  • Next up, log into your Instagram account and you will notice that your Instagram username has filled the Username field of the widget.
  • Now, configure all the rest of the options according to your preference.
  • You will be able to see how your Widget looks. If you like it, click on Get Widget and you will be delivered with the code snippet.

You will now have to insert this code snippet into your Tumblr to integrate the widget. Up next, we will be going in-depth on how you can do this.

Adding an Instagram Widget to Your Tumblr:

  • Head on over to Tumblr and enter your Dashboard.
  • Now click on the Account button.

account-button

IMAGE COURTESY: SNAPWIDGET

  • Here you will find the Edit appearance option. Select it!

edit-appearance

 

  • There will be an option called Website Theme. Under it is the Edit theme option. Click here next.

Edit Theme

 

  • Now click on Edit HTML.

edit-html.

 

Once you have got this interface up, you will be able to copy paste your widget code snippet directly onto this area which will add the widget to your Tumblr. However, if you want to finetune a bit more, there here are a few more steps you can follow:

Change the Formatting of the Instagram Widget:

  • Use an <hr> tag to display a horizontal line above your widget.
  • You can use a Header tag like <h1>…</h1>, or <h2> , or <h3> to implement a header to accompany your widget.
  • You can use the <div> tag to center the widget in a chosen area. You will also be able to set the widget of the widget set to take up a particular percentage of the chosen area.

Inserting the Instagram Widget Before A Post:

  • Once you are in the HTML file, search out for this line: “<section id=”posts” class=”content clearfix {block:HideTitle}{block:HideDescription}no-title-desc “
  • Enter your Instagram widget code snippet below this line. You can use a <br/> at the end of the snippet to introduce a line break between your widget and your posts.
  • Now click on the Update Preview option to see the changes. If you like what you see, then click on Save. Or else, you can always make changes so that it suits your preference.

Inserting the Instagram Widget After A Post:

  • When you are trying to insert the Instagram widget after a post, you will have to open your HTML file and search for this line: “</div> <!– .main →
  • Insert the widget code snippet before this line. You can use a </br> tag before the code snippet so that there is some space between the post and the widget.
  • Now, same as before – click on Update Preview and if you like it click Save.

Inserting the Instagram Widget in the Sidebar:

  • Again, open up your HTML file and search out this line: “<div class=”sidebar”>”
  • Paste your widget code snippet just after this line.
  • Click on Update Preview to look at the preview and if you like it click on Save.

NOTE: The widget is responsive. Hence the preview which you will get will display the page based on the widget of the preview pane. This might make it seem that the widget is narrower.

WE RECOMMEND

Divi Discount

SEMrush Banner

A D V E R T I S E M E N T

Affordable Hosting for your website

  • Affordable Pricing
  • Free Domain Name
  • 24x7 Support
  • Ready WordPress Installation
Bluehost-Logo-Banner

60% OFF Deal

Disclosure: This post might contain affiliate links. This means we may make a small commission if you make a purchase.

Leave a Comment

Your email address will not be published. Required fields are marked *

This website uses cookies to ensure you get the best experience on our website.