Overview Crawler Developer API Platform API Tutorials Client Libraries

How to add Swiftype to a Tumblr

With Swiftype, you can add a fast, modern search box to your Tumblr site. Swiftype has special support for Tumblr that allows us to index all your content accurately and completely, and gives you full-text search, not just search on tags.

Themes with Swiftype Support

The easiest way to start using Swiftype with Tumblr is to use a theme that already supports Swiftype. We have worked with theme authors to add support for Swiftype to their themes.

(If your favorite theme doesn't support Swiftype, consider sending a polite request to the author with a link to these instructions for theme authors.)

After installing a Swiftype-supporting theme, create a Swiftype account. Create a new engine, then copy your Engine Key from the dashboard the Tumblr theme settings.

Swiftype Engine Key

Tumblr Customize Theme Settings Form

You're done! Your Tumblr site now has fast, modern Swiftype search and autocomplete.

Manual Installation

To install Swiftype on a Tumblr site without theme support, follow these steps.

Step 1: Create a Swiftype Account

You can create a Swiftype account for free, and you will use this account to control your search engine once it is installed.

Step 2: Create a Search Engine for your Tumblr

To create your search engine, enter the URL of your Tumblr website into the site validation field. Once validated you'll be able to name your engine.

If you have a custom domain, use that. Swiftype will check with Tumblr to see if your site is hosted by them.

Tumblr-create-engine

After creating the engine, Swiftype will index posts from your Tumblr site.

Step 3: Install the Swiftype Code

On your Engine dashboard, click the Install tab. The code looks something like this:

<div id="st-results-container"></div>
<script type="text/javascript">
  var Swiftype = window.Swiftype || {};
  (function() {
    Swiftype.key = 'YOUR_ENGINE_KEY';
    Swiftype.inputElement = 'form[action="/search"] input[type="text"]';
    Swiftype.resultContainingElement = '#st-results-container';
    Swiftype.attachElement = 'form[action="/search"] input[type="text"]';
    Swiftype.renderStyle = "overlay";

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = <span class="kc">true;
    script.src = "//staging.swiftype.com/embed.js";
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
  }());
</script>

If you don't have a search box

If you don't have a search box, you'll need to add one. First, figure out where you would like your search box.

In this example using the Papercut theme, the search box will be added to the bottom of the header.

Tumblr-header-before-swiftype

After finding where you would like the search box to appear, paste in the Swiftype code for Tumblr sites that do not have a search box.

It will look something like this (the Swiftype code is outlined):

Tumblr-header-after-swiftype

Save your theme, and you've added a search box powered by Swiftype!

If you already have a search box

If your theme already has a search box, choose the Swiftype install code for Tumblr themes with search boxes already.

Copy the Swiftype install code into your theme before the </body> tag.

Tumblr-augment-search-box

Save your theme. Your search is now powered by Swiftype!

Removing Search Options

Some themes have options to search "My blog" or "All of Tumblr".

Tumblr-search-options

After installing Swiftype, these options will no longer work because Swiftype only searches your Tumblr site.

Therefore, you should find and remove the code that shows those options. Here is an example from the Redux theme.

Tumblr-remove-search-scope

Advanced Installation

Swiftype can be installed many different ways to suit your needs. Review the installation types your Search Engine's installation page.

If you can edit your Tumblr theme, you can get any of them installed by changing the given install code to match your theme.

For complete control, you can also use our jQuery search and jQuery autocomplete libraries.

Theme Authors: Add Support for Swiftype to Your Theme

Swiftype is looking for Tumblr theme authors to add support for Swiftype to their Tumblr themes. Please support@swiftype.com if you are interested.

Adding Swiftype support to a theme is easy.

First, add the a Swiftype Engine Key configuration meta tag.

<meta name="text:Swiftype Engine Key" content="" />

If your theme doesn't have a search box, add one. It should be targeted at /search so it will work for users who do not have Swiftype.

Then add the Swiftype embed code to the bottom of your theme, before the </body> tag.

{block:IfSwiftypeEngineKey}
<div id="st-results-container"></div>
<script type="text/javascript">
  var Swiftype = window.Swiftype || {};
  (function() {
    Swiftype.key = '{text:Swiftype Engine Key}';
    Swiftype.inputElement = 'form[action="/search"] input[type="text"]';
    Swiftype.resultContainingElement = '#st-results-container';
    Swiftype.attachElement = 'form[action="/search"] input[type="text"]';
    Swiftype.renderStyle = "overlay";

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = <span class="kc">true;
    script.src = "//staging.swiftype.com/embed.js";
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
  }());
</script>
{/block:IfSwiftypeEngineKey}

For a complete example, see our fork of the open source Vacant theme.

Customizing the look

The autocomplete drop down and results display are styled in a general way that looks good across a wide range of sites. To customize their appearance, you can use CSS.

All of the elements injected into the page have CSS classes you can target by including a more specific selector. For example, to change the font of the autoselect drop down, you could add this code to your theme:

body div.autocomplete ul { font-family: Georgia, 'Times New Roman', serif; }

For total control over the look of search and autocomplete, you can use our jQuery search and jQuery autocomplete libraries.