コピペでOK！2秒でTumblrにOGPを設置する方法

この記事をかいたのはよーいちさんです！2012 年 1 月 24 日の記事です。

A!@attrip > socialnetwork > Tumblr > コピペでOK！2秒でTumblrにOGPを設置する方法

最近Tumblrでブログをやる人も増えて来ていますね。

そうなると、普通のブログのように、Facebookいいね！や+1ボタンとか設置したくなるよね？

しかし、ソーシャルボタンを付けただけでは、サムネイル画像や記事のタイトル、ブログタイトルが出ない！

本当は↓こうなったらいいよね。

そのためにはOGP（オープングラフプロトコル）コードをTumblrのテーマのhtmlソースに追加しなければならないよ。

といっても、下のコードをコピペで貼り付ければ良いだけなので、かんたんOK！
※FacebookIDを入れないとうまく動きません。Facebook IDの調べ方は

facebookにログインした状態で下のリンク先をクリック。

what-is-my-user-id


{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="{PortraitURL-128}" />
<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}

Tumblrのカスタマイズのやり方

①Tumblrのダッシュボードから編集したいブログを選択。

②「表示をカスタマイズ」をクリック。

③「編集HTML」をクリック

④この記事の冒頭で紹介したコードを<head>～～</head>内に追加

⑤「デザイン設定」をクリック

⑥「保存」で完了！

あとは、いいね！を挿入したい箇所にいいね！のコードを挿入しましょう。

<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like href="{Permalink}" send="true" layout="button_count" width="200" show_faces="true" font=""></fb:like>

他のソーシャルボタンを入れたい人は、こちらが詳しく載っていますよ！参考にして入れたい箇所に各ソーシャルボタンを設置しよう！
→　ソーシャルブックマーク＆投稿ボタンの設置方法　

ちなみに、僕のタンブラー「ざりろぐ」もよろしく！

この記事を書いたよーいちにいいね！よろしく！

あなたはどう思いますか？

初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。もしブログの内容が気に入って頂けましたらGoogle+もしくは、RSSリーダーの登録よろしくお願いします。

@attripをフォロー

tumblrを自分のブログにウィジェットとして設置する方法いろんなウィジェットがありますが、これが便利だと思います。ちなみに今、ぼくのブログに入れてサンプルとして出しています。これは、何をやっているかというとtumblrのAPIを叩いて整形して表示させているだけですが、 [...]...
ブログにtumblrのリブログボタンをかわいく設置してみたなう。以前作ったものだけど掘り起こしてみる。 <a href=”javascript:var%20d=document,w=window,e=w.getSelection,k=d.getSelection,x [...]...
Tumblrフォローボタンを置く方法すごいアナログですが、tumblrでフォローを進める方法 Tumblrもあります。 “基本的に直感に信じてtumblrは、メモ代わりに使ってます。良かったらフォローしてね！リブログ大好きこんな風に画像お [...]...
未来を予測する最も良い方法は、未来を創り出すことである。 – otsune tumblrから引用未来を予測する最も良い方法は、未来を創り出すことである。 – otsune tumblr まとめサイト画像保管庫Q. この前otsuneさんが、言ってたね。サイトは、未来の自分の為に作る。なるほどなー。 [...]...
記事書く速度１０倍違う！WordPressにtumblrの記事を２秒で引用する方法 wordpressの管理画面の中のツールに利用可能なツールというのがあります。まずは、その中のpress　thisを入れてください。出典: fyeahkikomizuhara それを押すとこんな画面になります。 [...]...