Tumblr custom themes
Tumblr Blog Testimonials with Custom HTML
A Tumblr blog’s public face is its theme, and Tumblr lets you edit that theme’s HTML from the Customize page. Its theme docs even show a third party script, a Flickr widget, wired to a text option in the Customizer. The StoryProof embed can follow the same pattern. The honest caveats: it only appears on your blog’s theme, not on the dashboard or in posts, and phones show Tumblr’s default mobile theme unless you change that.
- A Customizer field that holds the widget id
- An IndexPage block so the script loads once
- What dashboard and mobile readers see
Theme HTML
Meta option and the sidebar block
Enter your widget id to prefill the Customizer option. Paste the first part inside the theme’s head and the second inside body, in the sidebar or wherever the theme keeps content outside the posts loop.
Part 1 · Part 1: the Customizer option
Customize › Edit HTML › inside <head>
<!-- Inside <head>: adds a "StoryProof Widget" text field to the Customizer -->
<meta name="text:StoryProof Widget" content="YOUR_WIDGET_ID"/>Part 2 · Part 2: the widget on index pages
Customize › Edit HTML › inside <body>, outside {block:Posts}
<!-- Inside <body>, outside {block:Posts}, e.g. in your sidebar markup -->
{block:IndexPage}
{block:IfStoryProofWidget}
<aside class="reader-proof">
<h3>What readers say</h3>
<div data-storyproof-widget="{text:StoryProof Widget}"></div>
</aside>
<script src="https://app.storyproof.io/embed.js" async></script>
{/block:IfStoryProofWidget}
{/block:IndexPage}Update the preview, save, and open your blog in a desktop browser. If the StoryProof Widget field appears in the Customizer, you can change the id there later without touching the HTML again.
Your widget id only fills in the snippet in your browser. It is not stored.
The problem, solved
Tumblr quirks and how the theme route handles them
- Problem 1
Code in a post shows as text
Posts are content that appears on dashboards and in reblogs, which is the wrong home for a page widget.
How StoryProof solves it
The StoryProof embed is a div and a script, and both belong in theme HTML, which controls how your blog itself renders.
- Problem 2
Widget repeated under every single post
Markup placed inside {block:Posts} is printed once for each post on the page.
How StoryProof solves it
Wrapping it in {block:IndexPage} outside the posts loop prints it once per index page, and one embed.js fills every StoryProof div present.
- Problem 3
Digging through HTML to change the id
Reopening a long theme file to swap one value invites a broken tag.
How StoryProof solves it
The meta tag creates a StoryProof Widget field in the Customizer, so the id changes there. Which approved testimonials show is chosen in StoryProof.
- Problem 4
Nothing shows on my phone
Tumblr says blogs display its default mobile theme on mobile devices unless you change that in the Customizer.
How StoryProof solves it
Change the mobile setting if you want your theme on phones, or link your hosted Wall of Love from your description so every reader can reach it.
- Problem 5
Commission clients’ words without asking
Screenshotting a kind message into a post shows a client’s words without their agreement.
How StoryProof solves it
Clients submit through StoryProof and nothing is shown until you approve it.
In StoryProof
Add the widget to a Tumblr theme
Step 1 of 5
Get the widget id
In StoryProof, build a widget in a layout that suits a sidebar, choose its approved testimonials, and copy the id.
Step 2 of 5
Open Edit HTML
From your blog’s Customize page, click Edit HTML below the theme thumbnail. Copy the current code somewhere safe first.
Step 3 of 5
Add the meta option
Paste Part 1 inside the head element, next to any other meta options the theme already defines.
Step 4 of 5
Add the IndexPage block
Paste Part 2 inside body but outside {block:Posts}, usually in the sidebar markup. Update the preview and save.
Step 5 of 5
Check desktop and mobile
Open the blog URL in a desktop browser, then on a phone, and decide whether to change the mobile theme setting.
Who sees the widget on Tumblr
Before you start
Limits on Tumblr
Tumblr docs as of 2026-11-14
Block names, Customizer meta options, the HTTPS rule and the mobile default follow Tumblr’s custom theme docs as read on 2026-11-14. These steps have not been followed on a live Tumblr blog.
No published script policy
Tumblr’s theme docs show a script loaded from a theme but do not set out a general policy on third party JavaScript. If the widget never appears, ask Tumblr support whether scripts run on your blog.
Dashboard readers miss it
Followers who read you on the dashboard see posts, not your theme. Mention your Wall of Love link in posts or your description for those readers.
Theme changes wipe edits
Installing a different theme replaces your HTML. Re-add both parts after any theme switch.
Badge on lower plans
Widgets carry a small "Powered by StoryProof" badge until Pro.
FAQ
Questions people ask
Short answers to what usually comes up next.
Why use a meta tag instead of typing the id into the div?
Tumblr turns a text meta tag into a field in the Customizer, as its Flickr example shows. You can then change the id without editing HTML.
Can I show the widget on a custom page instead?
Tumblr themes list custom pages through {block:Pages}. How each page renders depends on your theme, so test there before relying on it.
Will reblogs carry the widget?
No. The widget is part of your theme, not a post, so it never travels with reblogs.
Do I need a paid Tumblr plan for this?
Tumblr’s custom theme docs do not mention a plan requirement for editing theme HTML.
Still have a question? Ask the StoryProof team or book a demo.
Show commission clients what others thought
Collect and approve testimonials in StoryProof, then add one block to your Tumblr theme.