Help us understand the problem. What is going on with this article?

カスタムブロックでFacebookとかTwitterの内容を表示する方法

More than 5 years have passed since last update.

XOOPS Themes and Templates Advent Calendar 2012 の20日めの投稿です。
⇒ 19日目の投稿 suinさん: XOOPS+Smartyテンプレートテクニック 13個詰め合わせ
⇒ 21日目の投稿 kilicaさん: XOOPS のテーマ雛形を生成する

ソーシャルと連携しよう!

最近はFacebookやTwitterといったソーシャルなサービスが主流になっていて、ウェブサイトとソーシャルサービスとの連携をすることでウェブサイトの利用価値をさらに高めることができるようになっていることから、「連携をさせたい!」と思っている方も多いのではないかと思います。

そこで、今回はFacebookとTwitterのFeedをウェブサイトに表示する方法を紹介したいと思います。
それでは今日もはりきっていってみましょう!

Facebook編

1. はじめに


Facebookの「コメント」や「いいね!」をサイトに表示するのは至って簡単です!しかもXOOPS側で特別な何かをしないといけないということはありません。

ただし、Facebook側でApp IDを取得したり、FacebookのAPIを呼び出すためのJavascriptをウェブサイト側のHTMLに(今回はXOOPSのThemeに)書く必要があります。

今回はFacebookページを対象に作業をしてみましょう!

2.FacebookのApp IDってどこで取得するのか


はじめにFacebookの開発者向けページ https://developers.facebook.com/apps/App IDを取得します。ここでは Facebookページ が既ににある前提で話を進めます。(Facebookページをまだ持っていない方は別途Facebookページを作成する必要があります)

3.Facebookの App ID を取得する


3-1.取得するページへ行く

https://developers.facebook.com/apps/ へ行き、ページの右上にある + 新しいアプリを作成 のボタンをクリックします。

3-2.必要な情報を入力する

下記の2項目を入力します。

・App Name
・App Namespase

※ 入力した項目の右側がApp Name の場合はValid、 App Namespace の場合はAvailableになることを確認してください。

3-3.取得完了

取得が完了するとこういった画面に App ID が表示されます。



4.ウェブサイトに表示するコードをゲットする!


ここまでくればあと一息です!
頑張ってください。

4-1.Facebookページへ行く

https://www.facebook.com/xoopscube.beginners へ行きます。
※ ここではXOOPS初心者勉強会のFacebookページを対象とします。

4-2.ソーシャルプラグイン取得ページへ行く

「Facebookページを編集」
⇒ 「基本データを編集」」
⇒ 「リソース」
⇒ 「ソーシャルプラグインを利用する」
の順でクリックして進みます。



4-3.いいね!Boxを選ぶ

今回は「いいね!Box(like box)」を使うことにします。

4-4.3つの情報を入力する

最低限としては Facebook Page URL だけがあれば作成はできますが、ウェブサイトのどこに配置するかでサイズを考慮する必要があると思います。今回はトップページのセンターに配置するため、幅を700、高さを400としました。

・Facebook Page URL
・Width
・Height

4-5.Get Codeをクリック!

Get Codeをクリックすると、ウェブサイトに貼り付けるコードが2種類表示されます。

1はHTMLの

タグのすぐ下に貼り付けます。
これで必要なJavascriptのコードが読み込まれます。

2は今回はカスタムブロックにそのまま貼り付けました。

5.完成!!

出来上がるとこんな感じでウェブサイトに表示されます。
意外と簡単にできてしまうので、ぜひチャレンジしてみてください!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away