HTML自由度の高いTumblrをカスタマイズしてみたい

という理由で練習がてらzenbackとFacebook用にOGPを設定してみました。ところが、そもそもTumblrのテンプレートの構造を知らないので、Tumblrのカスタマイズマニュアルである「Creating a custom HTML theme | Tumblr」を見ながらあーでもない、こーでもないと…

ﾉ￣Д￣)ﾉ彡┻┻

なんとかできたのでシェアしときます。

 zenbackの設定

◇スクリプトコードを取得

zenbackのサイトにアクセスしてスクリプトコードを取得。コピーしてエディター等に貼り付ける。

◇Tumblrにzenbackのスクリプトコードを貼り付け

ここで覚えておいてほしいのはTumblrのテンプレートは1枚であることです。タグにより出力表示を切り替えます。

１．Tumblrにログインして、自身のTumblrサイトを開く
２．[カスタマイズ]をクリックする

３．カスタムテーマ[編集HTML]をクリック

４．表示されるHTMLの下記のコードの位置にzenbackのScriptコードを貼る

例として記事下に貼ります。

{/block:PostNotes} と {/block:Posts}の間に貼ってください。

★全ページに表示したい場合

{/block:PostNotes}

/**この行にzenbackのスクリプトコードをコピペ**/

{/block:Posts}

★記事ページのみに表示したい場合

{/block:PostNotes}

{block:PermalinkPagination}/**テンプレートにはないので追記**/
/**この行にzenbackのスクリプトコードをコピペ**/
{/block:PermalinkPagination}/**テンプレートないので追記**/

{/block:Posts}

５．[保存]ボタンをクリック

なんとか設定できましたが、トップページにも表示させたい場合は表示がウザイので、ソーシャルボタンのみとしたほうがよさそうです。 

OGPの設定

こちらは簡単！「コピペでOK！2秒でTumblrにOGPを設置する方法」からソースをもらってきて、一カ所変更しました。感謝！コピペしてIDと画像のURLの3カ所を書き換えるだけの簡単な作業です。

※先ほど書きましたが、１枚のテンプレートで出力を切り替えるので、OGPはINDEX用とエントリー用の2種類用意する必要があります。

◇OGPのソースコード

{block:PermalinkPagination}<meta property="og:title" content="{block:Description}{MetaDescription}{/block:Description}" /><meta property="og:type" content="article" /><meta property="og:url" content="{Permalink}" />{block:Posts}{block:Photo}<meta property="og:image" content="{PhotoURL-500}" />{/block:Photo}{/block:Posts}<meta property="og:site_name" content="{Title}" /><meta property="fb:admins" content="あなたのFacebookID" /><meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />{/block:PermalinkPagination}{block:IndexPage}<meta property="og:title" content="{Title}" /><meta property="og:type" content="blog" /><meta property="og:image" content="OGPで表示される画像をアップロードしたURL" /><meta property="og:site_name" content="{Title}" /><meta property="fb:admins" content="あなたのFacebookID" /><meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />{/block:IndexPage}

利用する前に下記の2カ所を変更してください。

1. IDを書き換えてください。IDは「what-is-my-user-id」で探せます
2. IINDEXページ用のOGPで表示させる画像をネットのどこかにアップロードしてURLを指定してあげてください

◇Tumblrにソースコードをコピペ

※予めソースコードをテキストエディターにコピーして、OGPコードを埋めてからTumblrのHTMLコードに張り直したほうが間違いは少ないと思います。

1. Tumblrサイトを開く
2. [カスタマイズ]をクリック
3. 「編集 HTML」をクリック
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />の下にコピペ

5. 保存して終了

◇デバッガーで確認

FacebookのデバッガーにアクセスしてURLをペーストしてみてください。

ばっちり表示されました。Facebookへの投稿もうまくいきました^^

◇投稿する上での注意点

1. サムネールが表示されるのは「画像」の場合だけで、それ以外は適当な画像が表示されます。
2. 写真を2点以上あげた場合も同様に適当な画像が表示されます。任意の画像を表示させたい場合は画像を１点としてください。

◇反省点

映像のサムネールとか、「画像」以外でも指定のサムネールが表示できるような気がしなくもないのであれこれコードを書き直しているののですがスキルが足りないのでうまくいかず。事後課題とします。ぺこり。

参考になれば幸い。

※ぼくのTumblrではこちらです。メインは仕事のためのメモですが、それに限らずその時々の関心時をつぶやいてます。

Facebookページ　プロフェッショナルガイド 蒲生トシヒロ 竹村詠美 原裕 大元隆志 井出一誠 マクラケン直子 ホシナカズキ 藤本壱 荒木勇次郎 関根元和 by G-Tools

Facebookフィード購読のおすすめ

僕はFacebookのウォールでブログ記事に書いた以外にも、ソーシャルメディアや、Web制作に関する情報、ライフハック情報などをつぶやいてます。フィード購読を希望の方は、下記の「フィード購読」をクリックするか、Facebookの蒲生 トシヒロのページからお願いします。