2021.04.17

【無料】Webサイトにインスタの投稿を表示する方法

  • このエントリーをはてなブックマークに追加

こんにちは!なかしです。

Web制作をしていると、サイト内にインスタの投稿を埋め込むことって多いですよね。

今回は、インスタの投稿を無料で
しかもレイアウトを自由にカスタマイズして表示できる『SnapWiget』の使い方についてご紹介します!

使い方

まずは、SnapWigetでアカウントを作成してみましよう。
SnapWidget公式サイトはこちらから。

 

 

右上の『SIGN UP』を押下してSnapWigetのアカウントを作成し、
ログインして『CREATE A NEW WIGET』ボタンを押下してください。

 

 

大枠の形を選択するページに遷移するので、
表示させたい形のテンプレートを選択しましょう。

今回は『Instagram Grid』を選択してみます。

 

 

細かいレイアウトを指定できるページに遷移しました。

まずは左サイドメニューのUsernameの部分にInstagramのアカウントを入力します。

 

 

ログインすると、右エリアがアカウントの最新投稿に切り替わります。

 

 

左側のメニューでカラムの個数やホバー時のエフェクトを変更できるので、自由にカスタマイズしていきます。

 

 

カスタマイズが完了したら、サイドメニュー下部にある『GET WIGET』ボタンを押下すると
埋め込み用のタグが生成されます。

『COPY TO CLOPBOARD』押下でコードをコピーし、サイト内の表示させたい部分に追加してみると・・・

 

 

こんな感じで簡単に表示することができました!!


メリットとデメリット

私が何度も使ってみて感じたことは、下記の通りです。

 

メリット

・無料で作成できる
・レスポンシブレイアウトにも対応可能
・一つのSnapWigetアカウントで複数のインスタアカウントを管理できる
・TwitterやFacebook、YouTubeにも対応できる

 

デメリット

・無料版はSnapWigetのサイトを経由しないとインスタのページに遷移できない

 

特に良いと思った点は、無料で導入できるのに色々とカスタマイズができるところで、
逆にちょっと・・・と感じたのは写真をクリックするとSnapWidgetのサイト内のページに遷移してしまい、インスタの投稿ページに直接遷移できないという部分でした。

※有料プランにするとインスタの投稿ページに直リンクできるようです。

最後に

いかがでしたか?
無料で利用できるツールなので、サイト内にインスタなどのSNSの情報を埋め込みたい場合はぜひ使ってみてください!

この記事を書いた人

なかしなかし

レジットのコーダー。趣味は旅行と料理と商店街散策です。

  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績