全一覧で各記事ごとにFBのいいね・シェアボタンを表示させたい (No. 1911)

質問

昨日、質問させて頂いた者です。(No. 1910 http://sugutsukaeru.jp/bbs/1910/ )
早速の返信、ご丁寧に有難うございました。

ダウンロードしたのは
NEWアイコン付き お知らせ更新ツール（タイムラインタイプ）
です。

https://developers.facebook.com/docs/plugins/like-button
こちらのページ内にある、「いいね！」するURLに
http://●●/●●/webdir/%_to_index_%#e%_d_%
を入れました。（short_list.txtファイルから同じものを記載）

いいねボタンのリンク先、シェアのリンク先がエラーという状態です。

お手数おかけしますが、宜しくお願い致します。

回答

「すぐ使えるCGI」のご利用ありがとうございます。

■Facebook の「いいね！ボタン(ウェブ用)」作成ツールの使い方
  https://developers.facebook.com/docs/plugins/like-button

１．
このページに「すぐ使えるCGI」のテンプレート内の表記をそのまま入れてしまうと「%」などの表記の入った間違った形式のURLと認識されてしまいますので、このページでは「『いいね！』するURL」の入力にダミーのURLを使います。

例えば、「http://www.example.com/sugu/webdir/index.html#e1」と指定します。「http://www.example.com/sugu/webdir/」まではご自身で設定中のサイトの情報を入れて下さい。


２．
「コードを取得」ボタンを押すと、下記のようなコードが表示されます。

○JavaScript SKD用「ステップ3: ページ上でプラグインを表示する場所にこのコードを配置します。」の部分

<div class="fb-like" data-href="http://www.example.com/sugu/webdir/index.html#e1" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>


○IFrame 用「ステップ2: ページ上でプラグインを表示する場所にこのコードを配置します。」の部分

<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com%2Fsugu%2Fwebdir%2Findex.html%23e1&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


３．
上記のいずれか選択した方法のコードをテンプレート templates/article/article_list.txt に指定しますが、その際、「index.html#e1」とダミーを指定したURLがコード中に現れている部分は以下の様に置き換えて下さい。

「index.html」 →「%_to_index_%」
「e1」→ 「e%_d_%」


４．
再構築（テンプレート変更反映）してうまくいくかご確認下さい。


【備考】
Facebook の他の設定があれば行って下さい。例えば、JavaScript SKD を選択されたのであれば、Step 2 のコードの設定も必要です。また、URL以外の設定も、ご希望に応じて変更して下さい。


【注意点】
「タイムラインタイプ」の製品の場合、いいねボタンに設定したURLは記事の登録が進むにつれて変更され消滅します。例えば、index.html#e3 だった記事は、新しい記事が登録されるに従い、index_1.html#e3 というように別のファイル（「次へ」で表示されるページ）に押し出されることになります。その点ご承知の上設定をして下さい。