Instagramのフィードを表示するウィジェットを作成できるWEBサービス「InstaWidget」

Instagramのフィードを表示するウィジェットを作成できるWEBサービス「InstaWidget」

Instagramのフィードを表示するウィジェットを作成できるWEBサービス「InstaWidget」

InstaWidgetは、Instagramのフィードを表示するウィジェットを作成できるWEBサービスです。作成したウィジェットをサイト内に埋め込むことができます。

InstaWidgetの使い方

InstaWidgetにアクセスして、下記項目を設定します。

InstaWidgetの使い方
ユーザー名 フィードを表示したいInstagramユーザー名
ハッシュタグ フィードを表示したいハッシュタグ
ブログパーツ幅 ブログパーツの横幅
ユーザーアイコン ユーザーアイコンの表示
ユーザー紹介文 ユーザープロフィールの表示
フォローボタン フォローボタンの表示
フォロワー フォロワー数の表示
外枠 外枠(線)の表示
外枠の色 外枠の色
文字の色 文字の色
背景色 背景色
写真アルバム 写真の表示(非表示にするとユーザー情報だけになる)
写真間の幅 写真間の余白
写真効果 写真のマウスホバーエフェクト
レイアウト 行数と列数
シェアボタン シェアボタンの表示
写真の枠 写真の枠線表示
新しいウィンドウで クリックした時の挙動

「ユーザー名」と「ハッシュタグ」はどちらか一方だけ設定しても良いですし、両方指定してもOKです。

[プレビュー]をクリックすると、右上に表示されるプレビューが更新されます。プレビューを確認しながら設定していきましょう。

設定が完了したら[埋め込みコードを取得]をクリックして、取得したコードをサイトに貼り付けます。

埋め込みコードの取得

例えば「#猫」のハッシュタグを含むフィードを表示したい場合は、以下のようなコードが生成されます。

<!-- InstaWidget -->
<a href="https://instawidget.net/v/tag/%E7%8C%AB" id="link-9c5f5fc5cfe4aea5a1f100ec3e8a111703350647b8ec2e2f92d870ce49301a22">#猫</a>
<script src="https://instawidget.net/js/instawidget.js?u=9c5f5fc5cfe4aea5a1f100ec3e8a111703350647b8ec2e2f92d870ce49301a22&width=300px"></script>

これをサイトに貼り付けると、ハッシュタグに「#猫」が含まれる写真が表示されます。

インスタグラムフィードの表示

あとがき

自前でInstagramのフィードを取得しようと思ったら、APIを使用する必要がありちょっとややこしいです。

InstaWidgetを使えばユーザー名などを入力するだけで、簡単にInstagramのフィードを表示できますね。

サイトにInstagramのフィードを表示させたい際は、ぜひ導入をご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です