instagram_widget001

FacebookにもTwitterにもタイムラインを表示するウィジェットが標準で用意されているのにInstagramにはありません。

少し探してみると、ブログに設置するのに良さそうなウィジェットを見つけたので紹介したいと思います。

スポンサードリンク

記事中に埋め込むとこんな感じ


#catの検索結果を1行5列で表示

SnapWidgetというInstagramのウィジェットを無料で作ることができるWebサービス。埋め込むとこんな感じに表示されます。

iframe要素で記述するので、HTMLで編集できるブログサービスであれば貼ることができると思います。

instagram_widget002

ブログのトップページのサイドバーに試験的に表示させています。画像のサイズを自由に変えることができ、レスポンシブにも対応しているので設置しやすいです。

自分のブログに導入してみよう

instagram_widget004

SnapWidget | Instagram Widget

ウィジェットを上記リンクから作成することができます。

instagram_widget005

さきほど埋め込んだウィジェット(”#cat”の検索結果)の設定はこのようになっています。

自分のInstagramの写真を表示させたい場合は”Username”、特定のハッシュタグの写真を表示させたい場合は”Hashtag”に情報を入力します。

設定するときに注意すべき点はウィジェットの幅に影響を与える”Thumbnail Size”、”Layout”、”Photo Padding”の値です。

例えば、設置する場所の幅が200pxしかないのに、Thumbnail Sizeを250pxに設定すると当然のことですがはみ出します(”Responsive”をOnにすると回避できます)。設定する場所のことを考えて値を決めましょう。

設定を終えたら”Preview”を押して、実際のウィジェットの表示を確認します。表示に問題がなければ、”Get Widget”で埋め込み用コードを出力し、コードをブログに貼れば設置完了です。

SnapWidgetは設定項目を触ることでウィジェットを様々なレイアウトで表示することができます。設定項目を表にまとめました。

Username Instagramのユーザー名
Hashtag ハッシュタグ
Widget Type 写真を表示するスタイル
Thumbnail Size サムネイルサイズ
Layout 表示する写真の数(X行Y列)
Photo Border 写真に枠線を付けるか
Background ウィジェットの背景色
Photo Padding 写真の間隔
Hover Effect 写真の上にカーソルを載せたときの挙動
Sharing Buttons シェアボタンの有無
Responsive レスポンシブ対応

Instagramの写真を一覧でブログに貼りたい方は是非試してみてください。

[関連] 簡単にできる!Instagramに長方形の写真を投稿する方法 | iLOG
[関連] Instagramに投稿した写真をまとめてダウンロードできるMacアプリ「4K Stogram」 | iLOG

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。