JavaScript redirect from Tumblr to WordPress

1 Views

I’ve read a lot of topics about redirecting Tumblr to WordPress, but I still can’t find a suitable solution.

Here is the problem: I want to redirect jeby.tumblr.com, a Tumblr blog, to the new jeby.it, a WordPress (WIP) blog with a custom domain and web space etc. I’ve already imported all contents, now all I want is to “automagically” redirect every single post from

Read More
jeby.tumblr.com/post/[POST ID]/some-slug

to 

jeby.it/2012/05/some-slug

I know that the post year and month are available in the Tumblr HTML code, as they are used to compose the permalink. I can’t use .htaccess redirects because the Tumblr blog is hosted by Tumblr.

I’ve done the same thing with Blogspot, where I found a plugin that created the right JavaScript code to paste into the Blogspot model and get automatic redirection.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. As you have realized already, you will need to do the redirection client side. How to achieve that is a matter of Tumblr’s theme templating system’s possibilities and limitations.

    • The year and month of a post are available as {Year} and {MonthNumberWithZero} tokens respectively; that gets you 2012 and 05.
    • The post slug, however, is not available as a token (not sure if this is an intentional omission – post slugs are optional on Tumblr; you can manually set one, but if you don’t your post just goes by its numeric ID) – so you will have to parse it out of the link inserted by the {Permalink} token.
    • Redirection can only take place on single-post pages. Unluckily, there is no template based way to make sure you target only these, as the beauty and limitation of Tumblr’s theme DSL is that it is defined as one page: you get a {block:Posts} block and Tumblr does the figuring out how many posts to display inside that. That means that meta http-equiv="Refresh" tags are out of the question, as they would also be included in all non-single-posts pages.

    Luckily, Tumblr does let you include arbitrary JavaScript in your template, and that is the way to go:

    1. add the following line inside the {block:Posts} block:

      <span class="redirdata">{Year},{MonthNumberWithZero},{Permalink}</span>

      Style your redirdata spans with display:none in your CSS to hide them (or style them inline – considering their intended use, there is little point in being dogmatic).

    2. now add a script to your <head> to parse these and redirect to the WordPress URL. As you want to do this for every possible visitor, i.e. as cross-browser compatibly as possible, I recommend using jQuery. Include it with:

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

      or any other hosted source (see the jQuery docs for CDN URLs). Then add the following script:

      <script type="text/javascript">
    $(function(){ 
        if ( $('.redirdata').length === 1) {
            var redirdataTokens = $('.redirdata').text().split(',');
            if (redirdataTokens.length === 3) { 
                var redirectTo = 'http://jeby.it/'+redirdataTokens[0]+'/'+redirdataTokens[1]+'/'+redirdataTokens[2].replace(/.*//, '');
                window.location = redirectTo;
            }
        }
    });
</script>

      and your single-post page should automatically redirect all visitors to the WordPress post page (if they have JavaScript enabled, of course). I am sure you will figure out to adapt this to tag archives, searches and such, if need be.

    Caveat Empteor: this will only work if the slugs of your WP posts match the slugs of your Tumblr posts – crucially also in the case of Tumblr posts with no textual slug (meaning you WP slug needs to match the numeric Tumblr post ID in that case).