兼業主婦の楽しむアフィリエイト

HomeSeesaaカスタマイズ > SeesaaブログのOGP対応: Facebookいいね!をニュースフィードに流すために必要な手順覚書

2012年07月15日

SeesaaブログのOGP対応: Facebookいいね!をニュースフィードに流すために必要な手順覚書

FacebookFacebook / MoneyBlogNewz


4月3日のリニューアルで、SeesaaブログがOGPに対応しました。

・OGP(Open Graph protocol)対応
OGPタグをブログに追加できます。SNSなどに引用される際にブログの紹介が正しく表示されるようになります。


わーい、
なんかボタン1コ押せば対応完了っぽいな!って思ってたらそうでもなかったので何が必要だったか記録しておきます。

(1) meta情報追加用のSeesaa独自タグを設置

Seesaaブログ管理画面 > 設定 > 詳細設定 > 外部連携 > OGPのタグを追加 で、「追加する」にチェックを入れて「保存」。

そうすると、以下のメッセージが。HTMLをいじってる人は自力でやらないといけない模様です。

OGPを表示するには、HTMLを初期化するか、下記のタグをHTML編集で追加してください。
追加するタグ: <% blog.ogp_tag(ar6cle_for_ogp) %>

で、このメッセージのタグ、間違ってます。HTMLを変更してないブログで確かめたら、正しくはこれ↓でした。

<% blog.ogp_tag(article_for_ogp) %>

デザイン > PC > HTML で、
上記タグを<head>と</head>の間に追加して保存(私はこれ↓の次に追加しました)。
<meta http-equiv="Content-Script-Type" content="text/javascript" />


※ タグを手動追加する場合も、設定 > 詳細設定 > 外部連携 > OGPのタグを追加 は必要です。(タグを手動追加しただけでは、Seesaa独自タグからFacebook用メタタグへの変換が実行されない。)

※ Facebookいいね!ボタンは、設定 > 詳細設定 > ソーシャルボタン で設置できます。

(2) xmlns属性の追加

デザイン > PC > HTML で、htmlタグを以下のように書き換えます。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 ↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

(3) アプリIDを取得してタグを設置

++以下は、4月に試した際の内容です。2012年7月現在、App IDを取得する(新しいアプリを作成する)にはアカウント認証が必要で、クレジットカード情報を登録するか、携帯のメアド認証をしないといけなくなっているようです。

App IDがなくても、ニュースフィードには記事への簡単なリンクが流れます(写真や記事概要は表示されない)。また、自分のプロフィールページには、メタ情報で取得した写真や記事概要も含めたリンクが表示されます。

App IDの代わりに管理者情報を追加してみましたが、ニュースフィードへの表示は簡単なリンクのままでした(写真・記事概要なし)。□□には、FacebookのID番号かユーザーネームを記入します(Facebook IDの調べ方)。
<meta property="fb:admins" content="□□" />

+++++

Facebook Developersのアプリ作成画面にアクセスして、「新しいアプリケーションを作成」をクリック。
https://developers.facebook.com/apps

以下の内容を入力。

 "App Name"
  今から作成するアプリの表示名。アプリ一覧などに表示されるもの。
  あとで変更可。

 "App Namespace"
  アプリの名前空間。URLなどに使われる文字列。あとで変更可。

 "Web Hosting: Yes, I would like free web hosting provided by Heroku"
  Herokuというクラウドホスティングサービスの案内?
  チェックしなくても進めた。

セキュリティチェック画面で、表示された文字を入力して送信。

基本設定画面 > アプリをFacebookに結合する方法を選択してください > ウェブサイトをクリック。
サイトURLに今からOGP対応させたいサイトのアドレスを入力して、変更を保存。

基本設定画面で App ID(数字)をコピーし、以下の□□の部分に貼り付ける。
<meta property="fb:app_id" content="□□" />

Seesaa管理画面に戻り、 デザイン > PC > HTML で、

<% blog.ogp_tag(article_for_ogp) %>
の下に
<meta property="fb:app_id" content="□□" />

を追加して保存。

(4) 正しく表示されるかチェック

下記ページ(オブジェクトデバッガー)で、正しく表示されているかチェックする。

http://developers.facebook.com/tools/debug

で、たぶん完了。

('og:description'のエラーは、よくわかりませんが大丈夫っぽいです。ちゃんと表示されるので。)

関連リンク

以下の記事を参考にしました。


今回のSeesaaリニューアル前に、自力でOGP対応できないか調べたんですが、できなくはないけど結構ややこしくて、後でソース見たとき(OGP対応の件を忘れて)なんでこんなややこしい構成にしたんだって混乱しそうな気がしたので、リニューアルを待ってOGP対応しました。









この記事へのコメント



コメントを書く

お名前(*入力必須):

サイトアドレス:

コメント(*入力必須):

認証コード(*入力必須):


※画像の中の文字を半角で入力してください。


この記事へのトラックバック

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。