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:

<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');

  _st('install','YOUR_INSTALL_KEY');
</script>

Copy and paste this install code into your Tumblr theme before the closing </head> tag, then save your theme.

Step 4: Configure your search

For best results with Tumblr, choose the Overlay style.

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, choose the "My website needs a search box" option and update your configuration, then copy and paste in the code into your Tumblr theme where you'd like the search box to appear.

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 "My website already has a search box" option and enter the CSS selector for the search box:

form[action="/search"] input[type=text]

Save the configuration, and 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.attachElement = 'form[action="/search"] input[type="text"]';
    Swiftype.renderStyle = "overlay";

    /** DO NOT EDIT BELOW THIS LINE **/
    var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
    script.src = "//s.swiftypecdn.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.