「JetpackのFacebook LIKEボックスの表示を修正する」で、Facebookページのタイムラインを埋め込むことをしていたのですが、そのときイベントも埋め込めるのではないかな？ということに気付きました。
そこで、FacebookページのイベントをWebサイトに貼り付ける方法を試してみました。
Facebookページのイベントとは？
コワーキングスペース八王子 8beatのFacebookページの例ですが、
このように イベント というタブで、8Beat主催のイベントが表示されています。このイベントについての情報をWebサイトのブロックに表示したいと思います。
その前に、Facebookページにイベントタブを付けたいときは、
自分が管理しているFacebookページの もっと見る をクリックして イベント をクリック
それだけで、イベントタブが追加されます。
ついでに、株式会社RYUSの場合はイベントを主催することはまずないので今追加したイベントタブを戻したいと思います。
もっと見る をクリックして、タブを管理 をクリック
イベント 行を タブの追加・削除 にドラッグします。
Facebookページプラグインを作るページに行く
「JetpackのFacebook LIKEボックスの表示を修正する」
ではアプリのIDをクリックして、という流れを説明したのですが今回試してみようとしたところ、どうも個別のアプリのIDにはひもづいていないような、、、気がしました。というのはどのアプリから作ってもAPP IDが同じになってしまうからです。(この件については後ほど書きます)
直接 ページプラグイン作成ページ を開きます。
Facebookにログインしていない場合は、
この画面になると思いますのでログインします。ログインすると通常のFacebookページになるので、再度、ページプラグイン作成ページに行きます。
* Facebook開発者登録を済ませていない場合はそちらを先に登録します
このプラグイン作成ページになると思います。
Facwebookページのイベント情報を貼り付けるコードを作る
前回の記事では
こんな感じにタイムラインを表示するコードを取得しました。デフォルトではTabsのところに timeline と入力されているので、このようにタイムラインが表示されます。
このページの下の方にパラメータの説明があり、そこのTabsの説明をみると
こんな風に書いてありました。「タブはすなわち、タイムライン、イベント、メッセージをレンダリングします。複数のタブ、すなわちタイムライン、イベントを追加するカンマ区切りのリストを使用します。」ということのようです。
今までtimelineしか使ってなかったのですがこれでイベント情報も表示できるとわかりました。
Tabs を events にしてみると、
こんな風にイベントだけのブロックを表示します。
Get Codeをクリックして、
コードを表示します。
Facebookページのイベント情報をWordPressで作られたサイトに貼り付ける方法
Get Codeをクリックして表示された １. の部分のコードをコピーして、
使っている子テーマの中で <body が使われているファイルを見つけます。みつからなければ親テーマを探して <body が使われているファイルを子テーマにコピーします。
今回修正しようとしたサイトはBonesの子テーマでした。この場合は header.php にありました。子テーマのheader.phpを開いて、
<body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage">
という行の下に１.のコピーしたコードを貼り付けます。
次に２.の部分のコードをコピーしておきます。
ダッシュボード 外観＞ウィジェット をクリック
利用できるウィジェットからテキストを貼り付けたいウィジェットエリアに追加します。
内容 にコピーしたコードを貼り付けて 保存 をクリックします。
表画面を確認するとこんな感じでイベント情報が埋め込まれました(^^)/。イベント情報をクリックすれば、
すぐにイベントページにとぶので参加する方も増えてくれるかと思います♪
イベント情報とタイムラインをタブで表示することもできます
Tabs の部分に
こんな感じで timeline,events と書けば、
タイムラインとイベントの情報をタブで切り替えて表示することもできます。
おまけ:埋め込み用コードのAPP ID はすべて同じでした
今までそれぞれのサイト毎にAPP IDを取得する必要があるかと思っていましたが、Facebookページのプラグインに関しては(おそらく)一人の開発者について1つのAPP IDとなるようでした。
を見ると、
名前も付いていないこのAPP IDがありました。この数字が先ほど埋め込んだ時のAPP IDやこのblogの埋め込みで取得したときのAPP IDと同じでした。
また通常のアプリと違ってこのAPP IDをクリックして作る必要はなく、今回書いたようFacebook開発者ページにログインしていれば直接ページプラグイン作成ページからいろいろなFacebookページのタイムラインやイベントの埋め込み用コードをgetすることができるようです。
もしかして一人の開発者について1つでなくてみんな同じなのかな？とかも思いますが複数のアカウントを作る訳にはいかないのでこの部分については推測している状態です(^_^;。
どちらにしてもFacebookのタイムラインやイベントの埋め込み用コードはとても簡単にいろいろな形のものが使えるようですのでぜひ試してみたください(^^)/
[amazon_searchlink search=”WordPressデザイン”]
コメント