2016.06.06
WEB制作

facebookページのタイムラインをアメブロに設置する方法

posted by shibasaki

こんにちは。
Storaipディレクターの芝崎です。

皆さんはアメブロのカスタマイズってした事ありますか?

先日カスタマイズする機会があったのですが、私もプライベートブログで使うことはあっても、
カスタマイズして使う事ははじめてなので構造が理解できず、はじめ結構四苦八苦しました。

今日はその中の一部、facebookページのタイムラインをアメブロのサイドバーに設置する方法をご紹介します。

blog160606

facebookタイムラインをアメブロに設置する方法


1.facebook developersにて、コードを取得


まず、facebook developersにアクセスします。

https://developers.facebook.com/docs/plugins/page-plugin

ページプラグイン - ソーシャルプラグイン
・ URL欄にご自身のフェイスブックページのアドレスを入れます。

・ widthには《300px》を入れます。

※これはAmebaブログで2カラムのCSS編集用デザインを選択している場合になります。


・ heightは、お好みに合わせて《○○px》を入れます。

以上を指定したら、ページ下部の「コードを取得」をクリックします。

ページプラグイン - ソーシャルプラグイン (2)
クリックすると上記の画面が表示されますので、2か所にあるコードをコピーしておきます。


2.Amebaブログの管理画面でプラグインを追加


次にAmebaブログの管理画面での指定になります。
※今回はカスタマイズ可能な「CSS編集用デザイン」を選定している想定での設定方法になります。

設定・管理|Ameba  アメーバ 2
ブログ管理>設定・管理>プラグインの追加
と遷移していただくと下記の画面になります。

プラグインの追加|Ameba  アメーバ
「フリープラグイン」をクリックして、さきほどfacebook developersページでコピーしておいた、
上部(ステップ2)を貼付けます。

貼付けられたらページ下部の「保存」をクリックします。


3.Amebaブログの管理画面でフリースペースを編集


設定・管理|Ameba  アメーバ
ブログ管理>設定・管理>フリースペース編集
と遷移していただくと下記の画面になります。

フリースペース編集|Ameba  アメーバ
さきほどfacebook developersページでコピーしておいた、
上部(ステップ3)を貼付けます。

貼付けられたらページ下部の「保存」をクリックします。


4.Amebaブログの管理画面でフリースペースの配置設定


フリースペース編集|Ameba  アメーバ  (1)
フリースペース編集のページ上部の「フリースペースの配置設定はこちら」をクリックします。

サイドバーの配置設定|Ameba  アメーバ
使用する機能内に「フリースペース」と「フリープラグイン」を移動されます。
移動したら、ページ下部の「保存」をクリックします。

Storaip_ameba
ご自分のブログを見て、facebookが表示されてれば成功です!

《まとめ》

いかがでしょうか。
アメブロって、結構独特の構造なので使用したことない方がカスタマイズするには、
戸惑う事もあると思います。

Wordpressの記事は沢山あるのに、アメブロのカスタマイズ記事は少なかったり、
情報が古かったりするので私も困りました。

でも、アメブロ内でのコミュニティやアメブロでお店ブログをしている方にとっては、
出来る限りカスタマイズして、お店の特長を見せていきたいところですよね。

ちょくちょく仕様が変わるみたいなので、苦労しそうですが、
私のメモ程度に今後もアップしていきますので、使えそうならぜひご活用ください ^ ^

Pocket


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

「依頼するのが初めて、何を相談すればいいの?」
「古くなったホームページ、新しくしたいけどどうすればいいの?」
「ページ滞在時間を伸ばしたい!問い合わせを増やしたい!」

お一人で悩む前に、まずはご相談ください。

CONTACT Storaip