| 04 | 2025/05 | 06 |
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
音と絵は合ってるんだけど、
たまに雑音が入る。
やっぱ昔観たのが一番いいかな。
と思ったら「pya! もすかう」が閉鎖になってる。
[0回]
前回の続き。
「Get Code」ボタンを押すと以下の２つのコードが得られる。
■コード１
「1.ページにJavaScript SDKを含めます(理想的には、<body>のすぐ後に配置します)。」
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
■コード２
「2.プラグインを表示したい場所にプラグインのコードを配置します。」
<div class="fb-like" data-href="http://atchi.blog.shinobi.jp/" data-send="false" data-width="450" data-show-faces="false"></div>
コード１はFacebook用のJavaScriptを
読み込むためのコード。
コード２は、実際に「いいね！」ボタンを
表示するためのコード。
さきほどの設定内容が
コードに反映されているのが分かる。
Send ButtonとShow Facesのチェックを
外して取得した状態。
テンプレートの編集で、
このコードを指示通りの箇所に記述すれば、
難なく「いいね！」ボタンが設置される。
ここで注意しなくてはならないのが
コード２の「data-href」という属性。
ここで設定するURLが「いいね！」の対象となる。
トップページに設置するのであれば、
「data-href」は固定でいいが、
ブログの各エントリに設置するのであれば、
これを動的に変える必要がある。
つまり、14番目のエントリであれば、
http://atchi.blog.shinobi.jp/Entry/14/
となってほしいし、3番目のエントリであれば、
http://atchi.blog.shinobi.jp/Entry/3/
となっている必要がある。
そこで、「変数」の出番となる。
忍者ブログには独自構文が用意されており、
各種データを変数で取得できる。
（一覧はここを参照）
変数の利用方法は、HTMLに
<!--$変数名-->
と記述する。
「g_user_id」（あなたのID）と
「entry_link」（詳細記事のURL）を
結合させて利用すればよいので、
data-hrefの値を
http://<!--$g_user_id--><!--$entry_link-->
に書き換える。
ちなみに、
<!--$g_url--><!--$entry_link-->
とすると、スラッシュが１つ余分に入ってしまう。
書き換えたコード２を、
制御構造である<!--entry-->の
セクション内に記述すれば
各エントリに対する「いいね！」ボタンが
設置できたことになる。
あとは微調整すればＯＫ。
[1回]
最近、いろいろなサイトで
Facebookの「いいね！」ボタンを見かけるが、
忍者ブログに標準ではないようなので、
勉強がてらに自分で設置してみることにした。
必要なコードはFacebookの公式サイトで
入手できるとのことなので、早速探してみた。
少し手間取ったが何とか見つけた。
■コード取得ページへの行き方
Facebookのページのフッターに
「開発」というリンクがある。
そこから、
「ウェブサイト向けに開発」
→「Core Concepts」
→「Social Plugins」
→「Like Button」
と進むと、
いいねボタンのコードが
取得できるページにたどり着く。
http://developers.facebook.com/docs/reference/plugins/like/
（英語だと「Like Button」というのか。）
まずはいくつか設定をするようだ。
■設定できる項目
①URL to Like
「いいね！」の対象となるページのURL。
②Send Button (XFBML Only)
「送る」ボタンを表示するかどうか。
③Layout Style
レイアウト。３種類から選べる。
・「standard」・・・右側に文で人数が表示される。
・「button_count」・・・右側に吹き出しで人数が表示される。
・「box_count」・・・上側に吹き出しで人数が表示される。
④Width
プラグインの横幅（ピクセル指定）。
⑤Show Faces
いいねボタンの前にプロフィール写真を
表示するかどうか。
⑥Verb to display
表示する言葉を選択できる。
「like」or「recommend」
日本語だと「いいね！」or「おすすめ」
⑦Color Scheme
色調(?)を選べる。
「light」or「dark」
⑧Font
フォントが６種類から選べる。
しかし、日本語だと意味がないらしい。
⑨Get Code
これを押すと、自動生成されたコードが表示される。
・・・・・・・・・・・・
項目を変更すると右側のサンプルに反映されるので、
いろいろいじってみるといいかも。
取得したコードはテキストエディタに
とりあえずコピっておく。
続く。
■参考サイト
「いいね！」ボタンを設置しよう ｜ Facebook Guide
http://www.facebook-japan.com/iine.htmlFacebook
Facebookの「いいね」ボタンをブログに設定する: 小粋空間
http://www.koikikukan.com/archives/2010/10/25-025555.php
[0回]
活動の記録をWebに残したい、
文章力を向上させたい、
2012年こそは何か始めたい、
そんな思いからブログを始めてみました。
稚拙な文章・内容ですが、
お付き合いいただけたら幸いです。