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"></script>
<div>

<div id="tumblr2">
  <script type="text/javascript" src="http://tumblr2.tumblr.com/js"></script>
<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?

UPDATE:
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 1

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

Use iFrames?

Answer 2

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"></script>

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

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"></script>
    <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"></script>
    <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 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 ]);

友情链接