How to Add a Tumblr Feed to Your Website

Most guides about putting social content on a website spend their first half explaining how to get the content at all, because most platforms have spent a decade making that harder. Tumblr is the exception, and it makes this a short story: every blog publishes a feed, at a predictable address, with no key and no approval.

That leaves the interesting part, which is what to do with it. Tumblr content is not uniform the way a video channel or a news feed is. A single blog can contain long essays, single images, quotations, links, audio and reblogged material written by somebody else entirely, all in the same stream, none of it with a proper title.

So this guide spends its time where the work actually is. The feed URLs take one section. Everything after that is about post types, reblog chains, images, and deciding what deserves to appear on your website.

The Feeds Every Tumblr Blog Publishes

Two URL patterns cover everything most sites need, and both are worth opening in a browser before you build anything, since a feed that renders in a browser is a feed a widget can read.

If the blog uses a custom domain, the same paths work on that domain. If a tag contains a space, it goes into the URL in encoded form, which is the usual reason a tag feed comes back empty on the first attempt.

The tag feed is the one worth building your setup around. It turns your tagging habit into an editorial control: decide that anything tagged for your site appears on your site, and you have a publishing workflow that costs nothing and needs no interface. It also solves the reblog problem before it starts, since a reblog you did not tag simply never reaches the feed.

Do not expect a complete archive from either form. The feed carries a recent window, which is right for a section on a page and wrong as a foundation for a searchable index of everything you have written.

Why Tumblr Content Is Awkward to Display

This is the part nobody warns you about, and it is the reason a Tumblr section can look broken when the feed is perfectly fine.

Posts have no titles. Tumblr was built around post types rather than articles, so a text post is a body, a photo post is an image, and a quote post is a quotation. The feed still has to put something in the title element, so it uses whatever it can find. Real feeds routinely contain items whose title is an entire sentence, or a fragment ending mid thought. A card layout that assumes a short headline will look wrong the moment it meets one.

Descriptions contain full markup. The item body is HTML, and for a reblog it contains the original post nested inside a quotation structure, along with links back to the blog it came from. Rendered without care, one reblogged conversation can take over your entire section.

Post length is unbounded. Tumblr is one of the last places people write at length in public. A single item can be longer than this article.

The three practical rules that follow: truncate deliberately rather than letting a container clip, do not build a design that needs a headline, and set a sensible height with a link out to the full post.

Deciding What Actually Belongs on Your Site

Before the mechanics, the editorial question, because a Tumblr section is one of the easier ways to put something on your website that you would not have chosen deliberately.

• Your own original posts. The safe core of any section. If you write on Tumblr and it is relevant to your visitors, this is content you own and stand behind.
• Your reblogs. Reblogging is conversation, and conversation reads differently out of context. On your own blog a reblog is participation, on your business homepage it is publishing someone else's words under your banner.
• Someone else's blog entirely. Occasionally the right call, for a community you are part of or a project you sponsor. It requires credit on every item, a link back, and an understanding that you are not the editor of what appears.
• A tag you share with other people. The riskiest option, because anyone can use a tag. Never point a public section at a tag you do not control.

The tag feed makes the first option easy to enforce, which is why it keeps coming up. Pick a tag that is yours, use it on the posts you would show a customer, and the section curates itself with no ongoing decisions.

Four Ways to Get It Onto a Page

The feed is open, so all four of these work. They differ in how much of the awkwardness above you have to handle yourself.

Writing your own parser is more work than it appears, and the reason is the third row. Handling a text post is easy. Handling a photo set, a quote with an attribution, an audio post and a three level reblog chain in the same loop is where the afternoon goes.

The single post embed has one good use: quoting a specific Tumblr post inside an article, the way you would quote anything else. It is the wrong tool for a section that should stay current, because it will not.

Images, Length and Reblog Chains

Three specific problems, three specific answers.

Images

Photo posts carry their images inside the item body, at whatever size they were uploaded. Two consequences: constrain images to the width of your container or they will break the layout, and expect the page to get heavier than a text feed would. A section showing five photo posts is showing five full sized images, which on a phone is worth deferring until they are scrolled to.

Length

Set an excerpt length and end it cleanly. Clipping with an overflow rule looks like a rendering fault to a reader, whereas a short excerpt followed by a link reads as a deliberate choice. Two or three sentences is usually right, and the link out matters more than the excerpt.

Reblog Chains

A reblog nests the original inside your post, sometimes several levels deep. If reblogs reach your section at all, either strip the nesting and show only your own addition, or show the whole thing with clear attribution. What you must not do is show the nested content without the attribution that came with it, which turns a reblog into an apparent claim of authorship.

All three are arguments for the same thing: tag your original posts and point the section at that tag. The awkward cases mostly stop arriving.

Which Sites This Actually Suits

Worth being direct, because Tumblr is not a general purpose business channel and a section that does not belong is worse than no section.

• Artists, illustrators and makers. The clearest fit. Work in progress posts, sketches and process shots are exactly what Tumblr is good at holding, and exactly what a portfolio site benefits from showing beside finished pieces.
• Projects with a community around them. A game, a comic, a zine, a long running independent product. The Tumblr blog is often where the conversation lives, and surfacing it on the site tells a visitor the project is alive.
• Writers and publications. Tumblr remains a place where people write at length rather than in fragments, which suits a section that shows a few paragraphs of real thinking.
• Fan and hobby sites. Where the platform still has genuine density, and where a tag feed is a serviceable substitute for a content management system.

The sites it does not suit are just as identifiable. If you would struggle to name the last five things posted to the blog, the section will announce that to everyone who lands on the page. A dormant feed is not neutral, it actively dates the site, and a homepage with a live section showing nothing from the last year is worse than a homepage with no section at all.

One good compromise if the posting is occasional. Put the section on a page where recency is not implied, such as a project page or an about page, rather than on the homepage where a visitor reads it as a pulse.

Layouts for Content That Is Not Uniform

Most feed layouts assume every item is roughly the same size. Tumblr breaks that assumption harder than any other source, so the layout choice matters more here than it does for videos or headlines.

Grid

Works when the blog is photo led and the images are a consistent shape. It fails loudly on a mixed blog, because a grid puts a two word quote in the same box as eight hundred words of essay and the row heights fight each other.

Masonry

The natural fit for mixed content. Items keep their own height and the columns fill around them, which is why image heavy sites converged on it years ago. The cost is that it needs a script to lay out, and it can shift the page as images load.

List

The reliable choice, and the one to pick if you are unsure. One item per row, a consistent excerpt length, and an image thumbnail at a fixed size. Nothing to fight, nothing to reflow, and it works on a phone without any thought.

Single Featured Post

One recent post, shown properly, with a link to the blog. Suits a site that posts occasionally and wants to show that it posts, without dedicating a whole section to it.

Whichever you pick, set a maximum height per item and a consistent excerpt length. The Tumblr specific failure is one enormous post pushing everything else off the screen, and both settings prevent it.

Speed, Images and Accessibility

A Tumblr section is usually the heaviest social section on a site, because it carries real images rather than thumbnails, and often several per post.

Defer the images. If the section is below the fold, its images should not load until a visitor scrolls toward it. This is one attribute in modern browsers and it is the single biggest improvement available here.

Constrain sizes in your own styles. Feed images arrive at upload size, which can be several times wider than your container. Constraining the display width does not reduce what was downloaded, so on an image heavy blog consider showing fewer items rather than smaller ones.

Alt text is usually missing. Tumblr supports image descriptions and most posts do not carry one, which means the images arriving in your feed often have nothing for a screen reader to announce. You cannot invent descriptions for content you did not write, so if accessibility matters on that page, favour your own posts and add descriptions at the source.

Give the section a heading and a link out. A heading tells everyone what the block is, and a single clear link to the blog gives a reader somewhere to go when one post interests them.

Check it with images blocked. A slow connection is the everyday version of that test, and a section that becomes a column of empty boxes is one worth reconsidering.

Showing a Blog You Do Not Control

The feed being public makes this technically trivial and editorially serious, so it deserves its own rules.

• Credit on every item. The blog name, visible, not just a link. A reader should never be uncertain who wrote what they are reading.
• Link every item back to the post. Opening in a new tab, so a visitor can follow the source and return.
• Prefer a tag over a whole blog. A narrower feed is a smaller surface for something you did not expect.
• Understand that you cannot moderate it. A public feed reflects whatever gets posted, and a blog can change character between one visit and the next. If the section sits on a page a stranger might land on, that risk is yours.
• Ask when it matters. Displaying a community member's posts on a commercial site is a favour worth asking for rather than assuming, and people usually say yes.
• Have an off switch. Know how to remove the section in under a minute, and know who else can do it when you are away.

If any of that feels like too much, the answer is not to add safeguards, it is to show your own posts instead.

When the Feed Is Not Enough

The feed covers display. Three needs push past it, and it is worth recognising them early rather than fighting the feed.

You need the archive. Anything paginated, searchable or complete needs the API, which means registering an application and getting a key. That is reasonable for a product feature and heavy for a homepage section.

You need to filter precisely. Post type filtering, excluding reblogs by rule, or combining several tags. The feed offers one tag at a time, and the API offers real queries.

You need to post from your site. A different job entirely, requiring authorisation rather than a key, and worth doing only if publishing to Tumblr is genuinely part of a workflow.

For everything else, the feed with a tag is not a compromise. It is less code, no key to rotate, no quota to exhaust, and nothing to maintain when a platform changes its terms.

Problems and Their Fixes

• The tag feed is empty. Check the encoding of the tag in the URL, and check the tag is spelled exactly as it is on the posts. Tags with spaces are the usual culprit.
• Titles are whole paragraphs. Expected, since most posts have no title. Show an excerpt of the body instead of the title, or a fixed label per item.
• Images overflow the container. Constrain image width in your own styles. Feed images arrive at their original size and will not fit themselves.
• Someone else's post appears under your name. A reblog reached the section. Move to a tag feed you apply only to original posts.
• The section shows one enormous post. No excerpt limit is set. Add one, and add a link out.
• Nothing new appears. Check the feed URL directly in a browser. If it has the new post, the problem is a cache on your side. If it does not, the post was not tagged, or it is not public.
• The blog moved to a custom domain. Update the feed URL, since the old one may keep working for a while and then stop without warning.
• Characters render as odd symbols. Curly quotes and dashes travel through feeds as escaped entities, and a parser that does not decode them shows the raw code. If you built the parsing yourself, decode entities before rendering rather than stripping them.
• The section works for you and not for visitors. Your browser has the blog cached and theirs does not. Test in a private window before concluding anything is fixed.

A last piece of general advice. The Tumblr feed is honest about what is on the blog, which means most surprises in a section are surprises about the blog rather than faults in the setup. When something looks wrong, open the feed URL itself first, since it takes five seconds and settles which side the problem is on.

For comparing display tools generally, our roundup of RSS feed widgets and plugins is the place to start, and if what you actually want is a tidy set of profile links rather than a stream of posts, social media link widgets do that job with far less on the page.

Getting Started

The short path. Pick a tag that belongs to you and apply it to the posts you would show a customer. Open yourblog.tumblr.com/tagged/yourtag/rss in a browser and confirm the right posts are in it. Display three to six items with a short excerpt, images constrained to your container, and a link out to each post. Then check it on a phone, because that is where the long posts and large images make themselves known.

If you would rather not handle the post types, the reblog markup and the images yourself, a hosted Tumblr feed widget takes the blog or tag URL and renders it in a layout you choose, updating on its own as you post.

If you are adding more than one social section, the two worth reading next are YouTube feeds, which are tidy but heavy, and LinkedIn feeds, which have no feed at all.