2016.06.06

WEB制作

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

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

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

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

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

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

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

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


・ URL欄にご自身のフェイスブックページのアドレスを入れます。

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

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

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

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


クリックすると上記の画面が表示されますので、2か所にあるコードをコピーしておきます。

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

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


ブログ管理＞設定・管理＞プラグインの追加
と遷移していただくと下記の画面になります。


「フリープラグイン」をクリックして、さきほどfacebook developersページでコピーしておいた、
上部（ステップ2）を貼付けます。

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

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

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


さきほどfacebook developersページでコピーしておいた、
上部（ステップ3）を貼付けます。

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

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

フリースペース編集のページ上部の「フリースペースの配置設定はこちら」をクリックします。


使用する機能内に「フリースペース」と「フリープラグイン」を移動されます。
移動したら、ページ下部の「保存」をクリックします。


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

《まとめ》

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

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

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

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