「いいね!」ボタン設置とOGP

「いいね!」ボタンの作成方法やURLの判定等について説明しています。又、OGPを設定する事でFacebook上で画像付で表示させる事も出来ます。

「いいね!」ボタンの概要

 「いいね!」ボタンはFacebook機能の一部で、様々なサイトで見かける以下のボタンです。

「いいね!」ボタンの設置とOGP1

 Facebookのユーザーがクリックする事で他のユーザーがサイトを発見しやすくなり、URLをクリックする事で簡単にホームページを参照出来るようになります。

 サイトを訪れた事がないユーザーの目に留まる機会が増えるため、訪問者を増やせる可能性があります。

 設置するのは無料なので、クリックしてくれる人が殆どいなくても設置しておいて損はないと思います。

「いいね!」ボタンの作成

 「いいね!」ボタンの作成は「facebook developers」で行います。

 上記のURLで「Get Code」をクリックするとhtmlに張り付けるコードが表示されます。緑の枠の部分は各項目を選択した時のプレビューです。選択を変更する度にどのようなボタンになるか確認が出来ます。

「いいね!」ボタンの設置とOGP2

 以下にそれぞれの項目について説明します。

・URL to like
 ホームページのURLを入力します。例えばexample.comやexample.com/index.htmlです。
・Width
 ボタンの幅です。デフォルトは450pxになっており、レイアウトでstandardを選択した時の文字が450pxで折り返されます。レイアウトをbutton_countやbox_countにするのであれば120pxやそれ以下でも大丈夫です。
・Layout
 ボタンのレイアウトは以下の4種類です。
standard
「いいね!」ボタンの設置とOGP3
button_count
「いいね!」ボタンの設置とOGP4
box_count
「いいね!」ボタンの設置とOGP5
button
「いいね!」ボタンの設置とOGP6
・Action Type
 デフォルトはlikeで日本語環境では「いいね!」と表示されますが、recommendにすると以下のように「おすすめ」と表示されます。
「いいね!」ボタンの設置とOGP7
・Show Faces
 レイアウトをstandardにしてチェックすると「いいね!」を押してくれた人のプロフィール写真が表示されます。他のレイアウトを選択したりチェックを外すとプロフィール写真は表示されません。
・include Share Button
 デフォルトではシェアボタンが表示されますが、チェックを外す事で以下のようにシェアボタンをなくす事が出来ます。
「いいね!」ボタンの設置とOGP8

 最後に「Get Code」をクリックする事でコードが表示されますが、ログインが必要です。Facebookのアカントを持っていない場合は登録が必要です。

 登録は簡単で、メールアドレス、名前、パスワード、生年月日等を入力し、送られてきたメールに対して承認をすれば完了です。

htmlへの反映

 設定が終わって「Get Code」をクリックすると以下のようなコードが表示されます。

「いいね!」ボタンの設置とOGP9

 2つのコードをhtmlにコピーして貼り付けます。下のコードは「いいね!」ボタンを表示したい場所に張り付けます。

 尚、「いいね!」ボタンはパソコンに保存したhtmlファイルをブラウザで開いても表示されません。サーバーにアップロードして初めて表示されます。このため、最初は公開する前にテスト的に作成したファイルをアップロードして表示されるか確認しておいた方がいいと思います。

URLの入力について

 URLは入力しなくても自動判定してくれます。このため、URLを設定していない同じコードを全てのページに張り付けて大丈夫です。

 但し、トップページは気を付ける必要があります。例えばexample.comとexample.com/index.htmlのURLを統一していなくて両方でトップページが表示される可能性がある場合、それぞれ違うURLと認識してしまいます。

 この場合、URLを入力しておくとどちらかに統一出来ます。例えばexample.comと入力しておくとexample.com/index.htmlがブラウザで表示されている時にクリックされてもexample.comと認識されます。トップページ等異なるURLで同じページを表示する場合は指定しておいた方がいいと思います。

Facebookでの拡散

 上記で「いいね!」ボタンを設置してFacebookのユーザーがボタンを押すと、以下のように友達登録された人のニュースフィードに表示され、題をクリックするとホームページを参照出来るようになっています。

「いいね!」ボタンの設置とOGPa

 ニュースフィードとは、ログインした時のホームで友達が何を投稿しているのか確認出来るようになっているため、ログインした人の殆どが参照します。

 Facebookでは友達登録してコミュニティを築きます。このため、参照した友達が更に「いいね!」ボタンをクリックすると、他の友達のニュースフィードに表示される事になり、訪問者の拡散が期待出来ます。

OGPの設定

 OGPはホームページの内容をFacebook等のSNSで認識出来るようにする設定です。

 OGPではサイトの題や説明、イメージ等を指定する事が出来ます。例えば、「いいね!」ボタンをクリックされると以下のように画像付でクリックした人の友達のニュースフィードに表示させる事も可能です。

「いいね!」ボタンの設置とOGPb

 画像付で表示されるとインパクトがあるため、写真や画像でホームページのイメージを伝えられるサイトであればOGPを設置する価値がかなり大きいと思います。

 OGPを設定するには<html lang="ja">部分を以下のように書き換えます。

【OGPでのhtmlタグ書き換え】
<html lang="ja" prefix="og: http://ogp.me/ns#">

 又、<head>と</head>に囲まれた部分に以下を追加します。

【OGP設定の例】
<meta property="og:title" content="タイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="ページのタイプ" />
<meta property="og:image" content="ページのイメージ画像" />

 赤字の部分は<title>タグ等で代替え出来ない設定です。又、太字の部分はページに合わせて修正します。それぞれの意味は以下の通りです。

・タイトル
 ページのタイトルを入力します。省略した場合は<title>タグで設定したタイトルが使われます。両方設定した場合はOGPの設定が優先されます。
・ページの説明文
 ページの説明を入力します。省略した場合は<meta name="description" content="ページの説明">タグで設定した説明が使われます。両方設定した場合はOGPの設定が優先されます。
・ページのURL
 ページのURLを入力します。省略した場合は表示されているページのURLが自動取得されます。
・ページのタイプ
 一般的にトップページはwebsite、その他のページはarticleにします。
・ページのイメージ画像
 http://example.com/image.png等のように指定します。

 OGPはSNS共通の設定のため、採用しているその他のSNSでも有効で、それぞれ独自の設定を行う手間を省ける場合があります。

Facebook特有の設定

 Facebook特有の設定としてhtmlヘッダーに追加する<meta property="fb:admins" content="ID" />があります。

 IDは「インサイト」から取得出来ます。

 表示された画面の右上で「ウェブサイトのインサイト」をクリックすると以下の画面が表示されます。

「いいね!」ボタンの設置とOGPc

 赤枠でexample.com等のドメインを入力し、緑枠で表示された部分をコピーしてhtmlの<head>と</head>に囲まれた部分に追加します。

 htmlファイルをサーバーにアップロード後、「インサイトを取得」をクリックするとそのページにアクセスされ、ページにIDが書き込まれていたら正当な持ち主と判断されてIDが有効になります。

 IDが有効になると、インサイトのページで「いいね!」ボタンのクリックによってニュースフィード等に何回表示されたか、その表示からどの位の人がサイトに訪問したか等の統計が参照出来ます。

 インサイトの利用はログインが必要です。

OGPのチェック

 OGPを設定してhtmlファイルをサーバーにアップロード後は「Open Graphデバッカー」でURLを入力してチェック出来ます。

 Open Graphデバッカーでチェックすると、Facebookで認識するタイトルや画像が表示されますが、特にエラーがなければOGPの設定は完了です。OGPでタイトルや説明、URLを省略していると解決の必要があると表示されますが、既に説明した<title>、<meta name="description" content="ページの説明">の設定やURLの自動取得により、タイトルや説明、URLがチェック結果の画面に正常に表示されていればFacebook上で反映されます。

 尚、OGPを更新した場合はOpen Graphデバッカーで再度チェックする事をお奨めします。FacebookではOGPをキャッシュしていますが、デバッカーでチェックする事でキャッシュをクリア出来ます。

 デバッカーの利用はログインが必要です。

画像サイズ

 Facebookでは幅1200px×高さ630px以上で幅:高さの比が1.91:1となる画像が良いとされています。推奨は幅1500pxで幅と高さの比から高さは786pxとなります。

 1500px×786pxの画像を作成してアップロード後にhtmlでOGPを指定、「いいね!」ボタンをクリックしてみるとニュースフィードには縮小して例えば526px×275px等で表示されます。

 但し、ニュースフィードに2つの画像が並んで表示される等の場合は正方形で表示される事もあり、その場合は以下のように切り取られます。

「いいね!」ボタンの設置とOGPd

 これは画像から正方形部分をトリミングするためです。

 このため、1500px×1500pxで画像を作成すると、通常はニュースフィードに以下のように切り取られて表示されます。

「いいね!」ボタンの設置とOGPe

 上記では上下が切り取られていますが、真ん中に1500px×786pxの画像を配置する事で表示したい内容が切り取られていません。

 又、正方形で表示される場合でも以下のように表示されます。

「いいね!」ボタンの設置とOGPf

 推奨画像サイズは度々変更されますが、大きくなる一方なので出来るだけ大きな画像で作成した方が良いと思います。又、正方形でも長方形でも重要な部分が切り取られないように正方形の画像として、中央に重要な部分を配置するようにした方が良さそうです。

 尚、画像を変更した際に同じファイル名でアップロードすると、Facebook上では変更する前の画像が表示されてしまいます。これはFacebook上でキャッシュされているためです。簡単に画像を変えたい場合はファイル名を変更してアップロードする必要がありますが、その場合はOGPでのファイル名指定も変更する必要があります。

 OGPでファイル名指定を変更した場合はhtmlのキャッシュをクリアするためにOpen Graphデバッカーで再度チェックが必要です。

Facebookのプライバシー設定

 Facebookは実名登録が必須です。実名登録して知っている人に検索されても変な書き込み等していなければ通常は問題ありません。

 一旦ログインしてみると何故Facebookがこれ程利用されているか分かると思います。Facebookの画面は優れていて、「いいね!」ボタンを作成するだけでなく、今後も使ってみたいと思うような作りになっています。

 実名登録に抵抗があってアカウント作成をためらう方もいると思いますが、プライバシー設定をしていれば知らない人にプライバシーが公開される事はありません。

 プライバシーの設定はログイン後の右上に表示される以下の赤枠部分で設定を選択する事で行えます。

「いいね!」ボタンの設置とOGPg

 表示された画面の左で「共有設定」を選択すると以下の画面が表示されます。

「いいね!」ボタンの設置とOGPh

 それぞれの意味は以下の通りで、右にある「編集」をクリックすると設定を変更出来ます。

・今後の投稿の共有範囲
 デフォルトは公開です。投稿しなければ気にする必要はありませんが、もし知らない人に投稿を見られたくない場合は友達に設定します。
・私に友達リクエストを送信出来る人
 デフォルトはすべてのユーザーです。知らない人からの友達登録を受け付けたくない場合は友達の友達に設定すると、友達登録している人の友達からだけ受け付けるようになります。
・受信箱にメッセージを受け取る相手
 デフォルトは基本フィルタです。友達からだけメッセージを受信したい場合は絞り込みに設定します。
・メールアドレスを使って私を検索できる人
 デフォルトはすべてのユーザーです。知らない人から検索されたくない場合は友達に設定すると、友達登録している人だけ検索出来るようになります。
・電話番号を使って私を検索できる人
 デフォルトはすべてのユーザーです。知らない人から検索されたくない場合は友達に設定すると、友達登録している人だけ検索出来るようになります。
・外部検索エンジンから私のタイムラインへのリンク
 タイムラインとはその人の名前や投稿、友達等が参照出来るページです。例えば友達登録した人がそのページを参照する事でどのような投稿をしているか、出身地はどこか等が参照出来ます。又、「いいね!」ボタンをクリックした時もここに表示されます。検索エンジンで検索されたくない場合はオフにします。

タイムライン公開範囲の設定

 タイムラインとは先に説明したように自分が「いいね!」ボタンをクリックしたり、投稿した履歴、友達リストや生年月日を見る事が出来る自己紹介のようなページです。自分だけ見れる情報もあれば、友達だけ見れる情報もあり、、友達リスト等の一部は友達でない人も見れるようになっています。つまり、見る人によって、参照出来る内容が異なります。

 タイムラインが他人からどのように見えているかは「設定」で「タイムラインとタグ付け」を選択し、プレビューをクリックすると見る事が出来ます。

 他人や友達に参照されたくないタイムラインの情報は個別に設定が変更出来ます。

 ログイン後に上に表示される自分の名前をクリックしてタイムラインのページを開き、表示されているタグで鉛筆のようなアイコンをした管理から「プライバシー設定を編集」を選択します。

「いいね!」ボタンの設置とOGPi

 選択したタグで表示される内容が異なりますが、例えば以下のように表示されるため、公開を友達や自分のみ等に変更する事が可能です。

「いいね!」ボタンの設置とOGPj

アカウントの一時停止

 自分に向いてないと思った場合はアカウントを削除したり、設定からセキュリティを選択して以下の赤枠部分をクリックする事で一時的にアカウントを停止する事も可能です。

「いいね!」ボタンの設置とOGPk

 一時的に停止した場合は誰からも検索されませんし、設定の勘違いで公開になっていてもプライバシーが漏れる心配がありません。又、ログインするとすぐに利用が再開出来る状態になっています。

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

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)