Twitter 「ツイートする」ボタンと Facebook App を埋め込む方法
当 concrete5 公式サイトに「ツイートする」ボタンを Facebook の「いいね」ボタン、そして Facebook のファンボックスを追加しました。
Twitterの「ツイートする」ボタンの設置は簡単です。
■ Twitter活用術 › ツイートボタン
http://twitter.com/goodies/tweetbutton
よる、自分の好みのオプションを加えて、各ページに追加するだけです。
今回 concrete5 公式サイトは、既に作られているページがたくさんあるため、テーマファイルに直接コードを埋め込みましたが・・・下書き共通ブロックとして、HTMLブロックを作成し任意のページに配置するのもいいでしょう。
Facebook のアプリの機能を搭載するには、ちょっと高度な知識が必要です。
※ 「いいね」ボタンや、「いいねボックス」
これはテーマファイルを修正する必要があります
1. Facebook App ID を取得
http://developers.facebook.com/setup/
各トップドメインごとにApp IDの習得が必要です。
2. HTMLタグ最初に宣言を追加
以下の宣言を HTML タグ内に追加します
──────────────────────────────
xmlns:fb="http://www.facebook.com/2008/fbml"
──────────────────────────────
例：
──────────────────────────────
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="<?php echo LANGUAGE?>" lang="<?php echo LANGUAGE?>">
──────────────────────────────
3. bodyタグ直後に宣言を追加
<body>タグ直後に以下のような宣言を追加します。
【アプリのID】の欄を、さきほど取得した App ID を入力します。
──────────────────────────────
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '【アプリのID】',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
──────────────────────────────
ちょっと分かりづらいですが、下から5行目のところで「ja_JP」とロケールを加えて日本語にすることを指示しています。
4. 任意の場所に Facebook のタグを埋め込む
こうすることにより、Facebook のいいねボタンや、ファンボックスをいくつもページ内に配置し、
http://developers.facebook.com/plugins
のような「いいね」ボタンやコメントボタンを concrete5 サイト内に配置することが出来ます。
実は・・・「いいね」ボタンや「ファンボックス」は、<iframe>タグを使っても可能ですが、同じページ内にいくつもの Facebook の機能を配置すると重くなってしまいます。
例えば「いいね」は、上記の実装しないと・・・
──────────────────────────────
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
──────────────────────────────
という <iframe> を使いますが
実装をきちんとすると
──────────────────────────────
<fb:like></fb:like>
──────────────────────────────
のシンプルな実装になります。
コード数が少なくなることに加えて、ページも軽くなります。
Facebookの運用を考えられている方は是非とも運用を考えられてください。
4. Facebook にシェアーされるときの<head>タグ
例えば、当 concrete5 公式サイトでは、meta titleを常に
【ページ名】：：【サイト名】
と表示するように設定しています。
しかし Facebook でリンクを共有するときに、特別に【ページ名】のみを表示させる指定ができます。そのコードは、テーマ内ファイルの<head>か、/elements/header_required.php のどこかに潜ませてください
──────────────────────────────
<meta property="og:title" content="<?php echo htmlspecialchars($c->getCollectionName(), ENT_COMPAT, APP_CHARSET); ?>" />
<meta property="og:site_name" content="<?php echo SITE;?>" />
──────────────────────────────
Katz Ueno
Re: Twitter 「ツイートする」ボタンと Facebook いいねを Page List に
http://yokosonews.com/
のように各ページのRT数や、「いいね」数のカウント一覧が表示できるようになりました。
そこのコードもシェアーします
──────────────────────────────
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php echo BASE_URL . DIR_REL . $nh->getLinkToCollection($cobj)?>" data-text="<?php echo $title?>" data-count="horizontal" data-via="【自分のTwitterアカウント】" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><fb:like layout="button_count" font="arial" href="<?php echo BASE_URL . DIR_REL . $nh->getLinkToCollection($cobj)?>"></fb:like>
──────────────────────────────
■ ブロック修正の仕方とカスタムテンプレートの仕組み
http://concrete5-japan.org/help/developer/block_custom_template/
を参考に、Page List カスタムテンプレートの該当箇所にこれを挿入すると、
http://yokosonews.com/
このトップ画面のページリストのように、各ページに対する「ツイートする」ボタンと「いいね」ボタンが表示されるようになります。