当サイトには広告が含まれております

簡単!サイトにFacebookページのいいねボタンとタイムラインを表示する

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

Image

※以下の内容は2015/06/22現在古いモノとなっています。新しい方法については「サイトにFacebookページを貼り付ける方法がLIKE BOXからPagePluginに」に書いてあります。

うさぎクラフトページのblogはそれほど書いていないのですが、木工品を作ったときはFacebookのうさぎクラフトページに頻繁に投稿しています。

昨日も、投稿していたのですが「サイトにFacebookページのタイムラインが表示されるとよさそう!」と思いました。

確か以前もそのようなことをやって、簡単だったのでプラグインなどは使わずに入れてみました(^^)/

記事をざっと見る

コードはFacebook開発者ページで簡単に作ってくれる!

Image

Facebook開発者ページ プラグイン likeボックスページを開きます。

Image

Facebook Page URL という欄に表示したいFacebookページのURLを入力します。

Image

うさぎクラフトのURLを入力して、 Show Friends’ Faces、 Show Header、 Show Posts、 Show Border 全てにチェックを入れます

この状態で、どのように見えるのか表示されているのでわかりやすいです。

Image

左下の方にある、

Image

Get Code をクリックします。ここで、Facebookにログインしていなければログインしてくださいという警告がでますのであらかじめログインしておいた方が良さそうです。

Image

コードがポップアップされます。IFRAMEラベルをクリックしてください。

Image

私の場合このようなワーニング?が出ましたがこのままにしておいても問題なかったので、もし出ても大丈夫です(たぶん…)。

Image

プラグインを表示したい場所にプラグインのコードを配置します。 と書いてある下のテキストエリアをクリックすると、全選択状態になります。その状態でコードをコピーします。

あとはこのコードをhtmlならhソースの表示部分にペーストすれば、先ほどプレビュー的に見えていたFacebookページのいいねボタンとタイムラインが表示されます。

WordPressに貼り付けてみる

うさぎクラフトはWordPressで出来ているので、ウィジェットを使って表示してみたいと思います。

Image

外観>ウィジェット をクリック。

Image

左下の方にある テキストウィジェット 右上の方にドラッグします。

Image

最近の投稿と最近のコメントの間にドロップします。

Image

テキストウィジェットのテキストエリアに、先ほどコピーしておいたFacebookのコードをペーストします。保存 をクリックします。

この状態でサイトを見ると、

Image

このようにFacebookページのいいねボタンとタイムラインが表示されました。

このテーマだと枠がない方が良さそうなので、コードを取得する画面で、

Image

Show Border のチェックを外して同じ手順で今作ったウィジェットにコードを上書きして保存します。

Image

このように枠がなくなり、デザインにフィットしました!

XOOPS Cubeに貼り付けてみる

会社のFacebookページはほとんどblogの更新情報だけなので、タイムラインは要りませんがもしかするとFacebookにいいね!をしておいてもらったら、そちらから読んでもらえる人が増えるかもしれません(^^)/。

ということで、会社のWebサイトにFacebookの株式会社RYUSページのいいねボタンを表示したいと思います。

Facebook開発者ページ プラグイン likeボックスページを開きます。

Image

Facebookの株式会社RYUSページ のURLを入力して、タイムラインの表示は要らないので、Show Posts のチェックを外して同じようにIFRAMEのコードをコピーします。

XOOPS Cube管理画面で、

Image

互換モジュール>ブロックの管理 をクリックします。

Image

カスタムブロック追加 をクリック

Image

タイトルは Facebookページ none とし、コンテンツ欄に先ほどコピーしたコードをペーストします。表示先やグループを適宜指定して、送信 をクリックします。

これで、

Image

ブロックに表示されました。ただちょっと横幅が大きすぎるようなので縮めたいと思います。

コードを取得したページの、

Image

width 欄に、224(ピクセル)と入力して、再度コードを取得してコピーます。XOOPS Cubeの管理画面で先ほどのブロックを開いて、コピーしたコードを貼り付けて更新します。

Image

これで、下のボタンと同じ幅になりました!

ということで、意外と簡単にサイトに貼り付けられるので情報をいせたいFacebookページをお持ちでしたら是非やってみてくださいね!

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (6件)

  • zoopsのカスタムブロック追加でトライしましたが、コードがそのまま表示されてしまします。
    LikeBoxが無くなって、ページプラグインになってますが、方法は同じでしょうか。
    そてとも、別設定が必要ですか?よろしくお願いします。

    • まつおもとひこさん、こんにちは。XOOPSのカスタムブロックでおこなうとコードがそのまま表示されてしまう、ということになるか新しくXOOPSをインストールして試してみたのですがうまくいってしまいました(^_^;。

      <iframe src=”https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fusort%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId” width=”340″ height=”500″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowTransparency=”true”></iframe>

      をカスタムブロックに書いて、タイプをHTMLタグにして保存すると表示されました。上に書いたコードは新しいページプラグインの方法でしたので、やはりカスタムブロックに書くことで表示できます。

      • 返信ありがとうございます。
        こちらも再挑戦しましたが、使用するテーマの関係か何かわかりませんが、やはりコードがそのまま表示されてしまいます。
        まいったなぁ~

        • まつおもとひこさん、おはようございます。もしかすると「CKEditorインストールしてて、WYSIWYGにそのままソースをコピペして入力したとか?」という可能性はありませんか?その場合でしたら ソース ボタンを押してからコピペするとうまくいくかもしれません。

          • ありがとうございました。
            ご指摘のとおりでした。
            おかげさまで無事Facebookページが表示できました。

          • まつおもとひこさん、こんにちは!無事にできたようで良かったです(^^)/。また何かありましたら聞いてくださいね♪

コメントを残す

記事をざっと見る