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

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対応しました。


2012年03月18日

Seesaaブログをカスタマイズするためのリンク集

Seesaaはカスタマイズ性が高くて使いやすい!と私は思います。

・・・なんですが、いかんせんヘルプが不親切なのです。サポートしてくれなくていいから独自タグとか仕様を公開してくれたらいいのになぁと思うんですが、問い合わせても教えてくれないので、カスタマイズしたければ何とか自力でやるしかありません。

Seesaaブログ > ブログのヒント

↑代表的な変数と関数は教えてくれてます。ただ、欲を言えば、忍者みたいな親切なヘルプがほしい。(じゃぁなぜ忍者に移らないのかというと、1番大きい理由は、非更新の場合の広告表示です。Seesaaは設定画面でオフにできるんですが、忍者はオフにできないんですよね。)

忍者ブログ・ヘルプ > 独自構文解説

そういうわけで、

私は以下の親切なサイト&ブログを頼りにカスタマイズしました。

ブログカスタマイズ
ブログ? カスタマイズ? アフィリエイト?
Deep's Blog> Seesaaカスタマイズ


【追記(2013/11/29)】

ひさびさにSeesaaカスタマイズ!
ずっとやりたかった記事下にカテゴリ別のコンテンツを入れる設定。if文を使えばいいのはわかるんだけど、2つのカテゴリに同じコンテンツを入れるにはどう書けばいいのかがなかなかわからず色んな検索語でググりまくってやっと見つけたのが以下の記事。わかりやすくてありがたかった!

Seesaaブログの記事のカテゴリ番号毎に関連するリンクを付加する(OR 条件による複数カテゴリを一括)

▼ポイントはココ。
<% if: (((article_category eq '10046946') + (article_category eq '10046812')) + ((article_category eq '10047034') + (article_category eq '10046894'))) + (((article_category eq '10046774') + (article_category eq '10046952')) + (article_category eq '10047062') ) -%> ここにコンテンツを入れる <% /if -%>

※ OR 条件の書き方のルールとしては、常に2項になるように「かっこ」でくくればいいようです。例えば、 ((A)+(B)) + ((C)+(D))


×

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