文書外のJavaScript定義ファイルの作成

例)

var url = encodeURIComponent(location.href);
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=' + url + '&width=470&layout=standard&action=like&show_faces=false&share=true&height=35&appId=XXXXXXXXXXXXXXXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:470px; height:35px;" allowTransparency="true"></iframe>');
		

赤文字の箇所が、こちらの要領で取得、修正したいいね!ボタンコード(IFRAMEコード)です。ページのURLを「' + url + '」に書き換え上記を「ファイル名.js」で保存します。コピペで使う場合はappIdも変えて下さいね。


facebook いいね!ボタンコード 例)

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhomepagelecture.web.fc2.com%2F&amp;width=470&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=35&amp;appId=XXXXXXXXXXXXXXXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:470px; height:35px;" allowTransparency="true"></iframe>

修正後)
<iframe src="http://www.facebook.com/plugins/like.php?href=' + url + '&width=470&layout=standard&action=like&show_faces=false&share=true&height=35&appId=XXXXXXXXXXXXXXXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:470px; height:35px;" allowTransparency="true"></iframe>
		

本文への記述

例)

<script type="text/javascript" src="ファイル名.js"></script>

Open Graph Protocol(OGP)で表示するサムネイル(画像)を設定


タイムラインに表示されたリンクです。Open Graph Protocol(以降、OGP)を設定していない状態では意図しない画像が表示されています。


Open Graph Object Debugger

Open Graph Object Debuggerの結果です。画像を多く使っているページなので画像のプロパティにいっぱい表示されています。本来表示してほしいのは左から10番目(表示順位10番目?)の画像ですがfacebookのタイムラインに表示された画像は一番左の画像です。実際にタイムラインに表示された画像は下のプレビューとは少し違う(左から4、5、6番目が候補)ようですがまぁ、気にせずに画像を指定する以下のOGPをhead要素に入力。


html要素 XHTML 1.0 例)

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

赤色の文字列をhtml要素に追加で記述します。名前空間の記述が無いと、いいね!ボタンを押してもらっても友達のニュースフィードに表示されないようです。(注1)


Get Open Graph Tags 例)

<meta property="og:image" content="http://homepagelecture.web.fc2.com/cpu_motherboard/msi_z97_gaming7.jpg" />

name属性 例)

<meta name="og:image" content="http://homepagelecture.web.fc2.com/cpu_motherboard/msi_z97_gaming7.jpg" />

property属性をname属性に置き換えても大丈夫なようです。特に拘るところでもないのですが、property属性がHTML,XHTMLでサポートしていない点が気になる方はどうぞ。


Open Graph Object Debugger

OGPをページに設定したあと、Open Graph Object DebuggerのFetch new scrape informationボタンでキャッシュをクリアした結果です。意図した画像が表示されています。


タイムラインのサムネイルも指定した画像に変更されていました。


余談ですが、og:imageのほか、OGPを設定する上で必須プロパティとされるog:title(ページのタイトル)、og:type(ページのタイプ)、og:url(ページのURL)ですが、Warnings That Should Be Fixedにも掲載されているものの、facebookではog:descriptionも加え、もともとtitle要素やmeta要素などで設定してあればそちらを参照してOGPとしてフォローしてくれるみたいですね。


注1

facebookタイムライン

いいね!ボタンを押すと最近のアクティビティに表示されます。その後、アクティビティログを表示させ、いいね!ボタンを押したページを黒丸(●)のタイムラインに表示にセットしないと友達のニュースフィードには表示されないようです。デフォルトでは白丸(○)のタイムラインに表示にセットされていました。黒丸と白丸の違いは私も謎。公開設定を自分のみにしたときに自分のタイムラインに表示する(●)か表示しないか(○)の違いっぽいのですが、それ以外の違いはわかりません。

html要素の名前空間のURLをxmlns:fb="http://www.facebook.com/2008/fbml"から、xmlns:fb="http://ogp.me/ns/fb#"へ変更することでデフォルトの白丸(○)でも友達のニュースフィードに表示されるようになりました。


このエントリーをはてなブックマークに追加

関連)

はてなブックマークボタンの設置例facebook いいね!ボタンの設置例facebook いいね!ボタンの設置例 2014facebook いいね!ボタンの設置例2Google +1 ボタンの設置例twitterボタンの設置例各ボタンを綺麗に横に並べる各ボタンを綺麗に横に並べる 2トップページへ戻る


RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system