【配布】freoにtumblrの新着情報を掲載できるプラグイン「Tumblr on freo」

ミニブログ「Tumblr」の新着情報をfreo上に掲載できるようになるプラグインです。

freoでギャラリーを管理しTumblrで日記・ブログを運用していたり、逆に日記としてfreoを使いギャラリーとしてTumblrを使用している場合など、簡単に連携することができます。

(2014/03/16追記)ギャラリーの見た目をそれっぽくできるテンプレート集作りました。「Tumblr on freo」表示サンプル

動作サンプル

130407tof.png

当サイトのトップページでも稼動してます(配布しているものとは見た目が異なります)

機能解説

ダウンロード

Tumblr on freo.zipをダウンロード(ver 1.1.0。2014/03/01更新)

ver1.0.0をご利用の方は必ずバージョンアップしてご利用ください(詳細

設置

  1. Tumblrの管理ページから「プラグイン解説::Tumblr on freo | Freoテンプレートギャラリー(外部サイト)」を参考にAPIkeyを発行してください。
  2. ダウンロードファイルを解凍し、下記「機能解説」にあるHTMLソースをfreoのテンプレートにコピーペーストしてください。
  3. 解凍したファイルと更新したテンプレートファイルをアスキーモードで上書きアップロードします。
  4. 「http://設置したfreoのURL/index.php/setup」にアクセスして出てきた表示どおりにセットアップします。
  5. freoの管理メニュー>システム>設定管理>プラグインの設定>Tumblr on Freo から、先ほど取得したAPIkey含めて設定してください。なお「表示したいtumblrのアドレス」は「http://」と末尾「/」を省いたアドレスを記入してください。
  6. ブラウザで設置したページを開きエラーが表示されなければ設置完了です。

機能解説

<div class="tumblr">
    <h3>{$tumblronfreo.info.response.blog.title}</h3>
    <p>{$tumblronfreo.info.response.blog.description}</p>
    <ul>
    <!--{foreach from=$tumblronfreo.post.response.posts|smarty:nodefaults item='tof'}-->
        <li><!--{if $tof.photos}--><img src="{$tof.photos.0.alt_sizes.5.url}" alt="{$tof.id}" width="{$tof.photos.0.alt_sizes.5.width}" height="{$tof.photos.0.alt_sizes.5.height}" /><!--{/if}--><a href="{$tof.post_url}">{$tof.date|date_format:'%Y/%m/%d'} {$tof.title}</a></li>
    <!--{/foreach}-->
   </ul>
</div>

上記テンプレートだと動作サンプルと同じような表示になります。

よく使うかもしれないもの

ブログのタイトル

{$tumblronfreo.info.response.blog.title}

ブログの説明

{$tumblronfreo.info.response.blog.description}

アイコン画像URL

{$tumblronfreo.avatar}

投稿内容

TumblrAPIでは記事本文にあたるパラメーターの名称がそれぞれの記事タイプで異なります。

例として、text/link/chat以外の投稿があるときにtitleを設定しておいても空欄になるので、テキスト表示をしたい場合はキャプション・引用文などと組み合わせて使うと良いとおもいます。

日付(yyyy/mm/dd 成型済み)

{$tof.date|date_format:'%Y/%m/%d'}

記事タイプ

{$tof.type}

記事タイトル(text,link,chat)

{$tof.title}

記事キャプション(photo,audio,video)

{$tof.caption}

記事引用文(Quote)

{$tof.text}

記事本文(text,chat)

{$tof.body}

画像(photoタイプのみ)

上からURL、横サイズ(px)、縦サイズ(px)を抽出できるパラメーターです。photoタイプで投稿した記事からのみ抽出できます。

横: 1280px × 縦: 722px

{$tof.photos.0.alt_sizes.0.url}
{$tof.photos.0.alt_sizes.0.width}
{$tof.photos.0.alt_sizes.0.height}

横: 500px × 縦: 282px

{$tof.photos.0.alt_sizes.1.url}
{$tof.photos.0.alt_sizes.1.width}
{$tof.photos.0.alt_sizes.1.height}

横: 400px × 縦: 225px

{$tof.photos.0.alt_sizes.2.url}
{$tof.photos.0.alt_sizes.2.width}
{$tof.photos.0.alt_sizes.2.height}

横: 250px × 縦: 141px

{$tof.photos.0.alt_sizes.3.url}
{$tof.photos.0.alt_sizes.3.width}
{$tof.photos.0.alt_sizes.3.height}

横: 100px × 縦: 56px

{$tof.photos.0.alt_sizes.4.url}
{$tof.photos.0.alt_sizes.4.width}
{$tof.photos.0.alt_sizes.4.height}

横: 75px × 縦: 75px

{$tof.photos.0.alt_sizes.5.url}
{$tof.photos.0.alt_sizes.5.width}
{$tof.photos.0.alt_sizes.5.height}

原寸

{$tof.photos.0.original_size.url}
{$tof.photos.0.original_size.width}
{$tof.photos.0.original_size.height}

もっとくわしいこと

このプラグインは「Tumblr API v2」の「/posts、/avatar、/info」を読み込んでます。より詳しいデータを取得したい場合は、API | Tumblrを参考にどうぞ。

参考資料

TOP