How to Embed Tumblr Feed on Your Website

Jotform’s Tumblr Feed widget lets you display posts from your Tumblr blog directly on your website. This gives visitors a way to browse your Tumblr content without leaving your site.

Whether you’re sharing artwork, blog posts, or updates, you can use the widget to feature your Tumblr content alongside the rest of your website

Before you can add the Tumblr Feed Widget to your website, you’ll first need to enter your data, set up the Connected Sources, and copy the embed code for it. Here’s how to do it:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget menu, enter Tumblr Feed.
4. Then, at the bottom of the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, set up these properties:
   • Connected Sources — Click on Add First Source to add a public social source to the feed.
   • Header — Show or hide the title and description above the feed.
   • Title — Enter the title you want to display above the social feed.
   • Description — Enter a short introduction to display in the feed header.
   • Post Limit — Click on and hold the slider handle, then drag it to set the maximum number of fetched posts displayed in the feed.
   • Author Name — Show or hide the account or page name on every post.

6. Then, scroll down to continue setting up these properties:
   • Author Picture — Show or hide a generated avatar for each source.
   • Publication Date — Show or hide the publication date of each post.
   • Post Text — Show or hide post captions and descriptions.
   • Source Label — Show or hide the social platform on each post.

7. Now, under the Style tab, customize these properties:
   • Theme — Click on the Downward Arrow icon and select a theme for the feed: Light, Dark, or Custom.
   • Corner Radius — Choose the corner style for post cards and source badges: Square, Rounded, or Circular.
   • Post Style — Click on the Downward Arrow icon and select a visual style for post cards.
   • Action on Post Click — Click on the Downward Arrow icon and select what happens when visitors click a post card.
   • External Links — Show or hide links to the original social content on posts.
   • Popup Style — Click on the Downward Arrow icon and select how the popup content is displayed.

8. Then, scroll down and continue to customize these properties:
   • Image Ratio — Click on the Downward Arrow icon and select how post images are cropped.
   • Post Meta Data — Show or hide like and comment information.
   • Text Size — Click on and hold the slider handle, then drag it to set the post text size in pixels.
   • Card Shadow — Show or hide a subtle shadow around post cards.
   • Source Style — Click on the Downward Arrow icon and select how platform labels appear.
   • Jotform Branding — Show or hide Powered by Jotform in the widget.
   • Font — Toggle this on, click on the Downward Arrow icon below it, and in the Dropdown menu, select Site Font to match your website’s font, System to use each visitor’s device font, or another available font.
   • Custom CSS — Toggle this on, and then in the Code Editor below it, enter custom CSS code to apply advanced styling to your widget.

9. Next, under the Layout tab, adjust these settings:
   • Display mode — Click on the Downward Arrow icon and select how you want the feed to be displayed.
   • Layout — Choose the layout for the feed: Grid, Masonry, List, Carousel, or Slider.
   • Width — Click on and hold the slider handle, then drag it to set the maximum width of the feed in pixels.
   • Columns — Click on and hold the slider handle, then drag it to set the number of columns in the desktop grid, masonry, or carousel layout.
   • Rows — Click on and hold the slider handle, then drag it to set the maximum number of rows shown before extra posts are hidden.

10. Then, scroll down and continue to adjust these settings:
    • Space between items — Click on and hold the slider handle, then drag it to set the space between post cards in pixels.
    • Header alignment — Click on the Downward Arrow icon and select how to align the header title, description, and provider filters.
11. Once you’ve finished configuring the widget, in the pink navigation bar on the top of the page, click on Publish.

12. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
13. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

14. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily. 

15. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Tumblr Feed widget will appear on your website based on how you set it up. Take a look at the screenshot below to see how it’ll look:

Discover

Website Widgets

Supercharge your website with interactive widgets that empower visitors to take action.

Discover Now