「すぐ使えるCMS」で更新している記事ページに 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について何人が「いいね！」ボタンを押したかを表します。
対象「すぐ使えるCMS」製品
「詳細ページ」のある製品が、このページでご説明する方法に対応している製品です。
設定方法
準備：製品の設置
これから製品をお試しされる方は先に製品をダウンロードの上設置を行って下さい。
設置が終わったら、テストで記事を1件登録して、ページが書き出されることを確認して下さい。
templates/article/article.html の編集
テンプレート templates/article/article.html を編集して以下のように2か所（赤字、青字部分）コードを追加の上、後述の調整を行って下さい。赤字は <head> と </head> の間に追加して下さい。青字は「いいね！」ボタンを表示させたい場所に追加して下さい。
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>
<div id="main-content">
<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')+"&")
fbBtn.src = fbSrc;
//-->
</script>
<!--「いいね！」ボタンを表示させたい場所に追加 ここまで-->
<div style="text-align: right;">
<p>%_yyyy_%/%_mm_%/%_dd_%</p>
</div>
%_body_%
</div>
</body>
</html>導入先Webサイトに合わせる調整
サイト名・URL
追加したコード内で下記緑字の部分は、それぞれ導入先のサイト名や導入先URLに変更して下さい。「meta property="og:image"」行の content はサムネイルとして表示させたい画像のURLです。Webサイトのロゴなどを指定して下さい。
<!--ヘッダ内に追加ここから -->
<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="サイト名をここへ"><!-- サイト名設定 -->
<!--ヘッダ内に追加ここまで --><!--「いいね！」ボタンを表示させたい場所に追加 ここから-->
：（省略）
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')+"&")
//-->
：（省略）
<!--「いいね！」ボタンを表示させたい場所に追加 ここまで-->ロゴファイルのサイズについて
Facebook の仕様が度々変更されるため、Webサイトのロゴとしてどのようなサイズが適しているかは難しいのですが、2017年6月現在は、縦横 1200px 程度ある大きめの画像を指定しておくときれいに表示されます。また、上下が切り取られて長方形で表示される場合があるので、切り取られてもおかしくならない構成にしておくのもお勧めです。
バージョン調整（Ver. 5.0 以上の場合）
Ver. 5.0 以上の製品をお使いの場合は、ファイル名の設定「%_d_%.html」を「%_to_article_%」にして下さい（2か所）。
<meta property="og:url" content="http://www.example.com/sugu/webdir/%_to_article_%"><!-- 設置したURLに変更 -->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/%_to_article_%')+"&")編集の反映
アップロード
編集が終わったら、保存した以下のテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。
templates/article/article.html
再構築
管理画面一覧の「再構築（テンプレート反映）」ボタンを押すと最新のテンプレートを反映してページが自動更新されます。
表示確認
ブラウザで表示を再読み込みして確認して下さい。
最初はカウント数は表示されていません。Facebook アカウントを持っている方は同じブラウザでログインしてから「いいね！」ボタンをクリックしてみて下さい。