Display two independent Tumblr blogs on one page?

Question

I'd like to display two independent Tumblr blogs next to each other on one page. I'd like them to look identical to their Tumblr theme. What's the best way to do this?

I'm able to use JavaScript to import the content like this:

<div id="tumblr1">
  <script type="text/javascript" src="http://tumblr1.tumblr.com/js"&gt;&lt;/script&gt;
<div>

<div id="tumblr2">
  <script type="text/javascript" src="http://tumblr2.tumblr.com/js"&gt;&lt;/script&gt;
<div>

But the content obviously won't be styled. Is there a simpler way to do this? If not, is there a simple way to style the content I'm getting from the js?

Answer 1

I'd use the api and set a json callback

<script type="text/javascript"
src="http://tumblr1.tumblr.com/api/read/json?callback=my_callback"&gt;&lt;/script&gt;

<script type="text/javascript"
src="http://tumblr2.tumblr.com/api/read/json?callback=my_callback"&gt;&lt;/script&gt;

Then just have a callback ready:

function my_callback(tumblr_data)
{
    //append the data to the div here
}

You can find the tumblr api read docs here.

EDIT: Or you could do it this way, without a callback:

<div id="tumblr1">
    <script type="text/javascript" src="http://tumblr1.tumblr.com/api/read/json"&gt;&lt;/script&gt;
    <script type="text/javscript">
        parse_tumblr_data(tumblr_api_read);
    </script>
<div>

<div id="tumblr2">
    <script type="text/javascript" src="http://tumblr2.tumblr.com/api/read/json"&gt;&lt;/script&gt;
    <script type="text/javscript">
        parse_tumblr_data(tumblr_api_read);
    </script>
<div>

I've used the above example before on this site to change the color on Tumblr's audio player... but you can do whatever you want.

Answer 2

I'm working on parsing the JSON but JavaScript not liking the dashes in the property values. For a simplified example:

<script type="text/javascript">
    var tumblelog = {

                    "title":"Tumblr Title",
                    "description":"Tumblr Description",
                    "name":"tumblr name",
                    "timezone":"US\/Central",
                    "cname":false,
                    "feeds":0,
                    "posts-start":0,
                    "posts-total":"111",
                    "posts-type":false

                    };

</script>

<script type="text/javascript">

     document.write(tumblelog.posts-total);

</script>

tells me "Uncaught ReferenceError: total is not defined". However,

<script type="text/javascript">

     document.write(tumblelog.feeds);

</script>

returns 0 just fine. Tumblr's API suggests something like

     document.write(tumblelog['@posts-total']);

when working with but that returns "undefined".

Any suggestions?

Answer 3

tumblelog['@posts-total'] will look for for the @posts-total key of the tumblelog obj, which doesn't exists.

Do this:

document.write(tumblelog['posts-total']);

Answer 4

I'd like them to look identical to their Tumblr theme.

Use iFrames?