Отобразить два независимых блога Tumblr на одной странице?

Я хотел бы отобразить два независимых блога Tumblr рядом друг с другом на одной странице. Я бы хотел, чтобы они выглядели идентично их теме Tumblr. Как лучше всего это сделать?

Я могу использовать JavaScript для импорта контента следующим образом:

<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>

Но содержимое, очевидно, не будет стилизовано. Есть ли более простой способ сделать это? Если нет, есть ли простой способ стилизовать контент, который я получаю от js?

ОБНОВЛЕНИЕ:
Я работаю над синтаксическим анализом JSON, но JavaScript не любит тире в значениях свойств. Для упрощенного примера:

<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>

говорит мне: «Uncaught ReferenceError: общее количество не определено». Однако,

<script type="text/javascript">

     document.write(tumblelog.feeds);

</script>

возвращает 0 просто отлично. API Tumblr предлагает что-то вроде

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

при работе с но это возвращает «неопределенное».

Какие-либо предложения?


javascript html tumblr
person Jake Salvera    schedule 07.05.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я бы хотел, чтобы они выглядели идентично их теме Tumblr.

Использовать iFrame?

person user225643    schedule 13.07.2010

arrow_upward
0
arrow_downward

Я бы использовал API и установил обратный вызов json

<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>

Тогда просто подготовьте обратный вызов:

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

Документацию по tumblr API Read можно найти здесь.

EDIT: Или вы можете сделать это так, без обратного вызова:

<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>

Я использовал приведенный выше пример до на этом сайте, чтобы изменить цвет аудиоплеера Tumblr... но ты можешь делать что захочешь.

person bschaeffer    schedule 07.05.2010

arrow_upward
0
arrow_downward

tumblelog['@posts-total'] будет искать ключ @posts-total несуществующего объекта tumblelog.

Сделай это:

document.write(tumblelog['posts-total']);
person bschaeffer    schedule 08.05.2010