質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.92%

Facebook Page Pluginが上手く表示されない

受付中

回答 4

投稿

  • 評価
  • クリップ 2
  • VIEW 19K+

score 12

独学で勉強中の初心者webデザイナーです。
webページにfacebookのタイムラインを埋め込みたいと思い、情報サイトqam(FacebookのLike Boxは6月22日で終了!新しいPage Pluginへの変更方法まとめ)を参考にApp IDの作成と、コードの発行&コピペをしてみたのですが、プレビューしてみるとタイムラインは表示されず、リンク付の普通の文字が表示されてしまいます。(リンク先はタイムラインを参照したいfacebookページでした。)

試行錯誤しているのですが、一向に解決の兆しが見えません。以下、試みた事です。
・ブラウザを変えてみる。(Chrome、IE11共に同じ)
・jQueryとの干渉を疑い、新規ページにコピペしてみる。
・facebookページの公開制限を確認。
・facebookからログアウトしてみる。

Page Plugin自体がfacebookの新規サービスなのでそちらの不備や、
App IDの作成に関して私の落ち度があるのではと疑っているのですが、デベロッパーサイトがほぼ全て英語の為、私の英語力ではなかなかスムーズに理解できず難航しています。
もし同じ症状から脱出された方や、改善方法に心当たりのある方、いらっしゃいましたら些細なことでも結構ですので、教えていただけると助かります。
よろしくお願いいたします。

以下、当方の環境です。
OS:Windows7 HP 64bit
エディタ:Style Note(5.14)
コーディング:HTML5,CSS3
ブラウザ:Chrome,IE11
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1


プレビューしてみるとタイムラインは表示されず、リンク付の普通の文字が表示

同ページを参照して、手順を確認してみました

所定の設定を記入して、コードを取得ボタンを押した後に表示される手順の案内:
1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
2. Place the code for your plugin wherever you want the plugin to appear on your page.

この2つのうち、1. の手順(<script>...</script> の配置)が抜けていませんか?
(スクリプトを置かなかった場合に状況が再現されました)

何か参考になれば幸いです

## Link

JavaScript SDK - Facebook

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/11 17:44

    1行目の<div>も、2行目からの<script>も全てコピペしてますので記述漏れは無いと思われます。
    ステップ1の<script>はFacebook JavaScript SDKというものですよね?
    これはコード発行時のものだけで十分なのでしょうか?
    事前に根本的なSDKを読み込んでおかないと、コード発行時のSDKは機能しないとかありますか?
    もしくは作成したAppの設定が事前に必要とかありますか?

    キャンセル

  • 2015/06/12 06:13

    コード発行時に、スクリプトの方にApp ID など、プラグインの利用に必要な情報が埋め込まれていますね
    スクリプトがコピペしてあるので、参照ページの手順通りで、他にとくべつ必要なことはないはずです

    別の再現方法を見つけました:

    Web ブラウザのアクセスしているページがURL が`file:///` から始まっている場合、SDK にアクセス出来ないとおもいます(スクリプト中の js.src の行でのURI 参照)


    Google Chrome の開発者コンソール([Ctrl] + [Shift] + [I] から「Console」)をみると、

    `GET file://connect.facebook.net/ja_JP/sdk.js net::ERR_FILE_NOT_FOUND`

    というメッセージが確認できると思います(http やhttps でアクセスすべきところが、ブラウザがアクセスしているプロトコルと同様の、file:// でアクセスしようとしていますね)


    もし上記のとおりであれば、XAMPP, MAMP, LAMP, LEMP スタックなど、サーバを起動できる環境(= http やhttps を利用したアクセス方法)を用意する必要があると思います
    Windows であればXAMPP を利用されるのがよいかもしれません

    (Vagrant やプログラミング言語の用意するビルトインサーバなど、ほかにも多くの選択肢が用意されています)

    キャンセル

0

全く同じ問題で一週間悩みましたが簡単に解決しました。
プレビューしたのではテキストリンクしか表示されないのですね。

ほとほと諦めましたが、思い切ってFTPで上げてみたら何と表示されます。
HTML5ではないのでdata-は削除してアップしました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

私もほぼ初心者ですので昨年同様な問題で試行錯誤しました。

確認ですがサーバーに上げて確認はされたのでしょうか?(ローカルでしか確認していないのでしょうか?)

過去に私も知らずにサーバーに上げていない状態で確認していたのでリンクのみ表示で正しく表示されませんでした。
一度仮にでもサーバーに上げて確認してみるといいと思いますよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

カスペルスキーを使用しているとfacebookの埋め込みが表示されません。chromeの拡張機能の中で同様に動作してしまうものもあるようです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る