小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

Facebook の「いいね!」ボタンと Open Graph tag を設定する方法

最終更新日: 2015-01-13
Facebook「いいね!」ボタン

「すぐ使えるCGI」で更新している記事ページに Facebookの「いいね!」ボタンを表示する方法をご紹介します。

「Open Graph tag」(Open Graph Protocol tag、OGP タグ)と呼ばれるメタタグ(<meta>)もページに追加しておくと、「いいね!」ボタンを押されたページを Facebook 上で表示する時のタイトルやサムネール画像を指定でき効果的ですので、この方法もご紹介します。

Facebook とは

Facebook は誰でも使えるインターネット上のコミュニケーションツールです。日本国産のサービスだと mixi に相当します。日本でも少しずつユーザが増えてきています。

Facebook サービスURL: http://www.facebook.com/

「いいね!」ボタンとは

「いいね!」ボタンは Webサイトが Facebook 上に紹介されやすいようにしておくための措置です。Facebook ユーザであれば、「いいね!」ボタンをクリックするだけでそのページを知り合いのユーザに紹介することができますので、Webサイト側にとっては、口コミ宣伝をしてもらいやすくする意味づけとなります。

※ 数字は、同じURLについて何人が「いいね!」ボタンを押したかを表します。

対象製品

このページでご説明する方法に対応しているのは以下の製品です。

設定方法

準備:製品の設置

これから製品をお試しされる方は先に上のリンクから製品をダウンロードの上設置を行って下さい。1ヶ月間無料でお試しいただけます。

ダウンロード後のページに「ステップ by ステップガイド」というインストール方法のご説明へのリンクが表示されますので、それをご覧になりながら設置して下さい。

設置が終わったら、テストで記事を1件登録して、ページが書き出されることを確認して下さい。

templates/article/article.html の編集

テンプレート templates/article/article.html を編集して以下のように2か所コードを追加して下さい。赤字、青字の部分が追加です。
青字は「いいね!」ボタンを表示させたい場所に追加して下さい。
赤字・青字パート内で黒い太字になっている部分はサイトの情報に変更して下さい。

「meta property="og:image"」行の content はサムネールとして表示させたい画像のURLです。Webサイトのロゴなどを指定して下さい。

Facebookのサムネイルサイズについて

Facebook の仕様が度々変更されるため、どのようなサイズが適しているかは難しいのですが、2015年1月現在は、縦横 1200px 程度ある大きめの画像を指定しておくときれいに表示されます。また、上下が切り取られて長方形で表示される場合があるので、切り取られてもおかしくならない構成にしておくのもお勧めです。

templates/article/article.html に追加するコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
<!--ヘッダ内に追加ここから -->
<meta property="og:title" content="%_subject_% - サイト名をここへ"><!-- サイト名設定 -->
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.example.com/sugu/webdir/%_d_%.html"><!-- 設置したURLに変更 -->
<meta property="og:image" content="http://www.example.com/img/logo.png"><!-- サイトのロゴに変更 -->
<meta property="og:site_name" content="サイト名をここへ"><!-- サイト名設定 -->
<!--ヘッダ内に追加ここまで -->
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
</head>

<body bgcolor="#ffffff">

<div align="center">

<table border="0" width="90%">
<tr>
<td width="20%"><a href="%_to_prev_%">←前へ</a></td>
<td align="center"><a href="index.html">↑一覧へ</a></td>
<td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
</tr>
</table>

</div>

<h1>%_subject_%</h1>
<!--「いいね!」ボタンを表示させたい場所に追加 -->
<iframe src="//www.facebook.com/plugins/like.php?send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:22px;" allowTransparency="true" id="fbbtn"></iframe>
<script type="text/javascript"><!--
var fbBtn = document.getElementById('fbbtn');
var fbSrc = fbBtn.src.replace(/\/\/www\.facebook\.com\/plugins\/like\.php\?/, "//www.facebook.com/plugins/like.php?href="+encodeURIComponent('http://www.example.com/sugu/webdir/%_d_%.html')+"&amp;")
fbBtn.src = fbSrc;
//-->
</script>
<div align="right">
<p>%_yyyy_%/%_mm_%/%_dd_%</p>
</div>

%_body_%

(省略)

</body>
</html>

編集の反映

アップロード

編集が終わったら、保存した以下のテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/article/article.html

再構築

管理画面一覧の「再構築(テンプレート反映)」ボタンを押すと最新のテンプレートを反映してページが自動更新されます。
まだ記事を登録していなかった場合は1件登録して下さい。

表示確認

ブラウザで表示を再読み込みして確認して下さい。
最初はカウント数は表示されていません。Facebook アカウントを持っている方は同じブラウザでログインしてから「いいね!」ボタンをクリックしてみて下さい。

表示のバリエーション

上の編集例は、ボタンとクリック数のみ小さく表示する場合の設定ですが、クリックしてくれた人のコメントやプロフィール写真を表示する事も可能です。詳しくは Facebook の技術情報ページをご参照下さい。

関連リンク

さらに詳しく