人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile


●質問者: kumagoro779
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

5 ● Bright
●83ポイント

三日待って治らないということはサーバーがおかしい可能性が高いです。

問い合わせるのがベストだと思います。


kumagoro779さんのコメント
ありがとうございます。参考になります。追加で質問させてください。レンタルサーバを使用しているのですが、今回のケースの場合、どのように問い合わせるのが良いでしょうか?ご教授いただけますと助かります。

6 ● みかん
●83ポイント

フェイスブックの「いいね」ボタンの設置方法

フェイスブックの「いいね」ボタン(likeボタン)はフェイスブックのページだけでなく、普通の ウェブページ楽天 (ホームページ)にも付けることができます。ウェブページの情報発信やアクセスアップに良さそうなので、早速ウェブページに付けてみました。ただ表示させるだけなら、やり方は簡単です。

フェイスブックの「いいね」ボタンの生成ページからコードを作成することができます。やり方はフェイスブックの「いいね」ボタンの設置の仕方を参照してください。iframe版を作成してください。

ボディタグ内の「いいね」ボタンを表示したい位置に次のようなタグを貼り付けます。
<iframe src="//www.facebook.com/plugins/like.php?href=http//example.jp/&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
この方法だと、「いいね」をクリックしてもそのページとクリックした人のウォールページに表示されるだけで、フェイスブックのニュースフィードのページには表示されません。何故ならこのタグ内には、そのページの情報以外のフェイスブックアカウントやその他の情報が何も無いからです。

「いいね」情報をニュースフィードに表示させる方法(app_idを取得)

ニュースフィードに表示させるには、ウエブサイトの所有者のフェイスブックアカウント情報等が必要です。このアカウント情報を使ってウェブサイトのID情報(app_id)を取得します。これはフェイスブックアカウント情報とウェブサイトのID情報(app_id)を紐付けすることです。

app_idを取得してから、「いいね」ボタンのコードを作成します

フェイスブックの デベロッパーズサイトのアプリ作成画面にアクセスします。この画面で、サイト名とURLを入力します。セキュリティチェックが済んだら、「Create an App」のアプリIDの作成完了画面が表示されます。このアプリID(app_id)を念の為メモしておきます。

再び前記のフェイスブックの「いいね」ボタンの設置方法に戻って、「いいね」ボタンを作成します。この時、設置するウェブページのURLを入力すると、次のようなアプリID(app_id)が入ったコードが生成されます。これをウェブページの表示させたい位置にコピーと貼付けするだけです。
<iframe src="//www.facebook.com/plugins/like.php?app_id=123456789012345&href=http//example.jp/&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
このようにして作成した「いいね」はコメントも書けるようになっています。これは「いいね」をした人とその友達のニュースフィードに表示されます。

URL部分をPHPコマンドで汎用表示にします(PHPが使えるサイトのみ)

ワードプレスではURL部分をパーマリンク「」にすれば、すべての記事で同じコードを使えますが、普通のウェブページではURLを個々に変更しなければなりません。

PHPが使えるサイトなら、URL部分をPHPコマンドで汎用表示にしてやればパーマリンクと同じように同一のコードが使えます。URL部分を次のようにしてやります。

$_SERVER['SERVER_NAME']部分はドメイン(www.example.jp等)を表しています。$_SERVER['REQUEST_URI']部分はそれより後のURL部(/***/example.php等)です。

フェイスブックの「いいね」ボタンのW3Cエラーを回避する方法

上記の方法では、allowTransparency="true" の部分で、XHTML1.0ではW3C Markup Validation Service のチェックでエラーになります。

このエラーを回避するには、allowTransparency="true" の部分を削除してやります。この部分はIE用で透過させるかどうかの設定です。これを削除すると、IEでは背景が白くなります。

最終的に、フェイスブックの「いいね」ボタンのコード(タグ)は次のようになりました。
<iframe src="http://www.facebook.com/plugins/like.php?app_id=123456789012345&href=<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" title="Like button">Like button</iframe>
上記以外に変更したところは、「//www.facebook.com」の前に「http:」を追加しました。また、「title="Like button"」を追加したのと、インラインフレームタグ間に「Like button」を追加したことです。これはHTML文法に忠実にする為です。もし、英語ページ等で「いいね」の表示を強制的に英語の「Like」にするには、「like.php?」の後に「locale=en_US&」を追加します。

うまく設定されているかどうかの確認

フェイスブックが用意している デバッガーを使ってうまく設定されているかどうか確認しましょう。

デバッガーの使い方は、URLをフォームに記入して「デバッグ」をクリックします。簡単な警告は出ますが、問題無いはずです。何故なら正式なOGP(Open Graph Protocol)を設定していないのですから。


kumagoro779さんのコメント
ご回答ありがとうございます。この通りにやり直しても相変わらず同じ症状がでてしまいます・・・

6-7件表示/7件
4.前5件|次の5件6.
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ