Spotlight On: Autumn
Featured Blog: Veritas

Typepad 101: Responsive Instagram Widget for Responsive Designs

With more responsive designs being readied for release, we want to help you make the best use of your responsive design by pointing out widgets that help your sidebar content to be fluid as well. In this Typepad 101 article, we'll provide information on how to setup and add the Instagram widget Instansive.

Configure the Widget

Below is the general setup of the widget. The first option available to you is to choose whether you would like to pull in photos from your entire Instagram account, or if you would like to crowdsource Instagram images from a specific hashtag. Use a unique hashtag for certain photos in your account? Even better.

Responsive Instagram widget for your Responsive Design
Responsive Instagram widget for your Responsive Design

Additional options available for customizing the widget are:

  • Type of widget (select from: grid, seen above; slideshown; and columns)
  • number of columns and rows
  • fade in or out
  • preload the images to help with load time
  • show the caption from the shared image
  • remove photo padding so the images sit closer together in the widget

There are advanced options, which many won't need to use, but they allow you to choose a different widget setup depending on the size of the window/device in which the widget loads.

You can use the slider, positioned on the right side of the example, which allows you to adjust the widget size so that you can see what it will look like at different widths.

Get the Code

When you've configured the widget, you can click Preview to confirm it appears the way you would like it to display on your blog. If it's looking good, click the Get Code button and copy the code provided.

Responsive Instagram Widget
Copy the generated code

Add the Widget

With the code copied, log into your Typepad account and go to the Content screen at Design > Content. Click to add the Embed Your Own HTML module. You'll want to give it a name/label so you remember what it is when making future changes to the Content screen. Paste the code into the HTML portion of the configuration pop-up, then click OK and place the module where you would like to see it displayed before saving your changes.

If you would prefer the widget have a header above it, then you can use a Notes Typelist in place of the Embed Your Own HTML module.

When you're done, load your blog in your preferred browser, or on your mobile or tablet device, to see the widget in action.

Responsive Instagram widget
Instagram widget live on blog

Do you know of other services that have responsive-friendly widgets? Leave a comment to let us and others know!

Comments

The comments to this entry are closed.