「なりたい自分」に、なれる女性を増やしたい！
ブランディングプロデューサーの櫻井圭子です。
本日は、インスタグラムをアメブロのサイドバーに表示させる方法というテーマのお役立ち情報をお伝えしますね。
以前もインスタグラムを表示させる方法の記事は書いたのですが、なぜか表示ができなくなってしまい・・・。
そして2016年の1月頃からインスタグラムからもバナー（バッジ）のコードの提供がなくなってしまいました。
ですので今回は最新版に修正してお届けしますね！
今日のブログの流れはこんな感じです♪
1、インスタグラムをサイドバーに表示させる！（所要時間5分）
２、インスタグラムのフォローボタンを設置する！（所要時間5分）
合計10分でサクッとできちゃいます！
インスタグラムをアメブロのサイドバーに挿入して、オシャレな日常を発信していきましょう。
では、張り切っていきましょう！！
インスタグラムをアメブロのサイドバーに表示させる方法
インスタグラムのウィジェットをアメブロのサイドバーに表示させるには、「Snap Widget」というものを使います。
「Snap Widget」でウィジェットを取得しよう！
①「Snap Widget」へ
（私は日本語に表示させていますが、デフォルトは英語です。）
今日から始める→新しいウィジェットを作成するをクリック！
↓
②ウィジェットを選択する
人気のウィジェットが並んでいますが、先頭のものを選択します。
↓
③ウィジェットを編集
ウィジェット作成画面に遷移しますので、ここで自分好みに作成していきます。
サムネイルサイズ（Thumbnail Size）は2カラムなら95くらいがちょうどいいですよ。
自分のカラムとサイドバーの横幅に合わせて調整してみてくださいね。
ホバー効果（Hover Effect）とは、マウスを上に乗せた時の変化のことです。
無難になしでもよいし、ちょっと変化をつけても面白いですね。
【ホバー効果一覧】
フェードイン（Fade In）：通常サムネイルが少しぼけた状態で表示され、マウスをあてるとぼけた状態がなくなります。
フェードアウト（Fade Out）：マウスをあてた時に、少しボケた状態になります。
ズームイン（Zoom In）：マウスをあてた時に少し画像が拡大します。
好き＆コメント（Likes&Comments）：マウスをあてた時に、いいねとコメントの数が表示されます。
ちなみに私は好き＆コメント（Likes&Comments）にしてみました。
（動きが見れて1番楽しいかなと思って♪）
自分の好みに設定して、これで良いかなと思ったらプレビューを押してみてみましょう！
↓
④ウィジェットを取得する
プレビューを見てOKならウィジェットを取得するをクリックし、でてくるコードをコピーする。
さぁ、次はアメブロに貼り付ける番ですよ！
アメブロのプラグインにインスタグラムのウィジェットコードを貼り付けよう
⑤「マイページ」から「アメブロ」をクリック
⑥「設定・管理」→「プラグインの追加」
↓
⑦「フリープラグイン」のタブを選んで先ほどのタグをペタッと貼り付け
デフォルトでは、「プラグインリスト」が選択されていますので、必ず「フリープラグイン」を選んでくださいね！
フリープラグインを既に配置設定している方ならここで完了。
まだ配置していない人はあと少しですよ！
超簡単だから最後まで頑張って！
最後にフリープラグインを配置設定して完了です！
⑧マイページに戻り「設定・管理」→「配置設定」
↓
⑨フリープラグインを配置設定
使用しない機能に「フリープラグイン」があったら、ぴーっとドラッグして使用する機能の方に移動させてください。
（既に使用する機能に移動してあったらそのままでOKです！）
保存を押して完了です！！
さぁ、ブログを確認してみましょう！！
こんな感じで表示されていたらOKです！！
（※こちらの無料版では、画像をクリックした先がインスタグラムではなく、Snap Widgetになります）
表示されているサイズが大きすぎたり小さすぎる時は、「Snap Widget」の編集画面に戻って修正してウィジェットコードを取得し直してくださいね。
インスタグラムのフォローボタンを設置する方法
さてさて、サイドバーに無事にインスタグラムのウィジェットが表示されましたね！！
フォローボタンも欲しい方はもう1ステップ頑張りましょう！
所要時間たったの5分です。
①自分のインスタグラムのページのURLを取得する。
インスタグラムにログイン
右側の人のマークをクリックすると自分のページが表示されます。
↓
②インスタグラムのアイコンをアメブロに保存
使いたいインスタグラムのフォローボタンをアメブロに画像として保存します。
インスタグラムのロゴや素材はこちらでDLすることができます。
https://www.instagram-brand.com/
（※利用規約を守って使ってくださいね）
公式ではありませんが、
「インスタグラム アイコン 商用フリー」
などで検索すると、無料で商用利用ができる素材も沢山でてきますよ♪
（※こちらも制作者さんのご好意で提供してもらっている素材ですので利用規約を必ず守ってくださいね。）
ちなみに私は自分で作りました♪
じゃーん！！櫻井圭子特製のインスタグラムフォローボタンです！！
可愛いデザイン大好き
③画像にリンクさせる
◆「記事を書く」
使いたいフォローボタンを記事に挿入し、リンクの設定で自分のインスタグラムのurlを入力する。
◆「HTML表示」にしてタグをコピーする。
先頭の<p>と終わりの</p>は選択しなくて大丈夫です。
↓
④フリースペースにペースト
◆「マイページ」→「設定・管理」→「フリースペース編集」
◆「フリースペース編集」画面に貼り付けます。
Point
この時、タグの中に<!― インスタフォローボタン ―>と入力すると管理がしやすいですよ！
サイドバーの真ん中に表示させたい時は先頭に<center>、終わりに</center>タグを入れてくださいね！
所要時間10分で完了。お疲れ様でした！！
インスタグラムとアメブロを上手に使いこなして、未来のお客様にあなたの想いを届けましょう♪
という訳で本日はインスタグラムをアメブロのサイドバーに表示させる方法でした♪
コメント＆シェア＆メッセージはどうぞお気軽にしていただけると、とっても嬉しいです
＼ブログで集客したい起業女子必見！ ／
ブログ集客講座は、グループセミナーとマンツーマンの個別コンサルがあります。
▶︎▶︎▶︎ブログを24時間働く営業マンにするセミナー
▶︎▶︎▶︎特製レジュメ付き！ブログ個別コンサル
本日も最後までお読みいただきありがとうございました。
みんなで幸せになりましょう
<ブログコンサルタント> 櫻井 けい子
◆ ブログセミナー▶︎▶︎▶︎ブログを24時間働く営業マンにするセミナー
◆ 個別ブログコンサル▶︎▶︎▶︎特製レジュメ付き！ブログ個別コンサル
◆ お問い合わせ・ご質問はお気軽にどうぞ▶︎▶︎▶︎お問い合わせフォーム
-------------以下、過去記事となります-------------
インスタグラムって
簡単でおしゃれな写真がシェアできていいですよね
アメブロのサイドバーに表示されてあるだけで、
なんだかオシャレに見えちゃう
私のインスタグラムです
アメブロのサイドバーに
インスタグラムを表示させる方法
とっても簡単
こちらにアクセス
↓
ログインしてはじめる
②必要情報を入力していく。
レスポンシブはONにすると
幅を勝手に調整してくれるので便利です
③ウィジェットのコードがでてきたらコピーする
④【アメブロへ】
マイページ
↓
設定・管理
↓
プラグインの追加
↓
フリープラグイン
↓
ペースト
↓
保存 完成
あっという間に完成ー
簡単可愛いオシャレー
POINT
タイトルが欲しいなーって思った時は
タグを自分で追加してね
インスタグラムとアメブロを上手に使って
自分をブランディングしていきましょう