ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ インスタグラム(Instagram)をサイドバーに表示する方法
投稿日: 2014/10/27 投稿者:webコラム
皆さん、こんにちは!
今回は世界で幅広く使われている「インスタグラム(Instagram)」をサイドバーに表示する方法を紹介します。
インスタグラムって何?という方へ簡単に説明すると、
写真や動画を撮って友達とシェアしたり、FacebookやTwitterに投稿したりできるアプリのことです。
つまり、「自分が撮った写真などをアメブロのサイドバーに表示できるようにしよう!」ということです。今回はCSSを編集するのではなく、ブログパーツを他サイトに作ってもらいそれをプラグインとして表示する方法です。
①コードを取得する
今回はブログのパーツを作ってくれる「snapwidget(http://snapwidget.com/ )」を利用します。
海外のサイトですが、とても簡単なので英語が苦手な方も指示通りにしてみてください!
上記リンクを開いたら [Get Your Free Widget] をクリックします。
すると何やら入力する画面が出るので、埋めていきます。
上から順に、
Username : Instagramのユーザー名 ※ハッシュタグで表示したければHashtagへ
Hashtag : ハッシュタグ ※自分の写真を表示したければUsernameへ
Widget Type : 表示方法
Thumbnail Size : サムネイル(縮小画像)のサイズ
Layout : 左右×上下で表示する写真の数(最大60)
Photo Border : 写真の周りにボーダーをいれるかどうか
Background Color: 背景色
Photo Padding : 写真同士の間の余白
Hover Effect : マウスの乗せたときの効果
Sharing Buttons : シェアボタンの有無
以上を入力したら[Preview]で出来上がり見本を見て、大丈夫なら[Get Widget]でコードを得ます。
②コードを入力する
先ほどの工程で得たコードを、フリープラグインに追加していきます。
アメブロのマイページから[管理トップ]→左側メニューの[設定・管理]→画面下部の[プラグインの追加]と開きます。
開いたページのフリープラグインのタグを選択して、先ほどのコードをここへ足して保存します。
保存すると「新たにプラグインの追加をした方→サイドバーに配置してください」と出るので、青くなっている[こちら]を選択し、好みの場所へフリープラグインを移動させて完成です。
まとめ
上手くできましたでしょうか?
自分の趣味などお気に入りの写真を並べて、同じ趣味の人に見つけてもらえば友達の輪が広がるかもしれませんね♪