インスタグラムをアメブロ・Jimdoサイドバーに表示する方法

インスタをアメブロに貼る033

当教室のアメブロのサイドバーには、インスタのサムネイルを表示させています。

インスタをアメブロに貼る033

使ったのは、SnapWidget(スナップウィジェット)です。

ハンドメイド作家さんや、ネットショップなどをやっている方は、インスタから注文が入ったりするようですね。

「インスタやってるよー」
のアピールのために、ぜひこのスナップウィジェットを活用してみてはいかがでしょうか?

スナップウィジェットを使って、アメブロのサイドバーと、Jimdoホームページに、インスタのサムネイル画像を表示させる方法をご紹介します。

 

SnapWidget(スナップウィジェット)の使い方

1.SnapWidget(スナップウィジェット)にアクセス

※最初にアカウントを登録します。
2.右上「Sign Up」をクリック

インスタをアメブロに貼る020

 

3.名前・メールアドレス・パスワードを入力し「SIGN UP」をクリック

インスタをアメブロに貼る021

 

4.左上の無料版「GRID」タイプをクリック

インスタをアメブロに貼る022

※設定画面はこのようになっています

インスタをアメブロに貼る002

 

5.※以下、私が設定した部分のみ解説します

「Username」にインスタグラムのアカウントを入力

「Layout」に表示させるレイアウト(横×縦)を数値で入力

インスタをアメブロに貼る005

 

6.「Hover Effect」は、マウスポインタが画像に触れた時の効果を選択(私は Fade Out=薄くなる)

「Sharing Buttons」は、フェイスブック&ツイッター&ピンタレストのシェアボタンを表示させるかどうかを選択(私は No=表示しない)

「Responsive」は、表示させる画面の幅に合わせて横幅が変わる設定にするかどうかを選択(私は Yes)

 

7.プレビュー画面で確認して良ければ、右下の「GET WIDGET」ボタンをクリック

インスタをアメブロに貼る023

8.貼り付けコードが表示されるので「COPY TO CLIPBOARD」ボタンをクリックしてコピーする

インスタをアメブロに貼る024

 

アメブロにSnapWidget(スナップウィジェット)を貼る方法

1.アメブロの管理画面左下「設定・管理」→「プラグインの追加」

インスタをアメブロに貼る008

 

2.「フリープラグイン」タブをクリックし貼り付け→「保存」ボタン

インスタをアメブロに貼る009

※プラグインを初めて使う場合は、サイドバーに「フリープラグイン」を表示させなければいけません。

3.保存後に表示された画面の右にある「こちら」の文字をクリック

インスタをアメブロに貼る010

 

4.「使用しない機能」の欄にある「フリープラグイン」を表示させたい場所にドラッグ→「保存」ボタン

インスタをアメブロに貼る011

 

JimdoにSnapWidget(スナップウィジェット)を貼る方法

1.貼り付けたい部分で「コンテンツ」を追加をクリックし、「その他のコンテンツ&アドオン」をクリック

インスタをJimdoに貼る030

2.「ウィジェット/HTML」をクリック

インスタをJimdoに貼る031

3.コードを貼り付けて、「保存」ボタンをクリック

インスタをJimdoに貼る032

※表示されていない場合は、キーボードのF5キーを押すか、ブラウザウィンドウの画面更新ボタンをクリックしてください。

ABOUTこの記事をかいた人

パソコン教室に8年勤務後に独立、2012年6月から自宅にて【ぴんぽいんとパソコン教室】をスタート。おうちサイズで起業をする女性を、パソコン&スマホという分野からサポートできるよう、日々アンテナを張って新しい情報を仕入れ勉強中。ちょっと変わった変なものが好きなB型。趣味はカエル雑貨収集とフィギュアスケート観戦(ちょっと滑れます)。