Instagramのタイムラインを掲載！埋め込みマニュアル！

1 instagramAPIを使った埋め込み方法は？
2 外部サイトでタイムラインの埋め込みをするには？
3 instagramの個別投稿の埋め込みをする方法は？
4 埋め込んだ写真のサイズを変えるための方法は？
5 埋め込みはやり方さえわかれば難しくない！

instagramのタイムラインは、ブログやサイトに表示させることが可能です。
instagramのようなSNSをブログやサイトとリンクさせることは、マーケティングの観点からも重要であると言えます。
そのため企業のウェブ担当者は、その具体的な方法を知っておいたほうが良いでしょう。

TwitterやFacebookといった他のSNSと比べると、instagramを埋め込む方法は多少複雑に感じるかもしれません。
具体的な方法を紹介するので試してください。

instagramAPIを使った埋め込み方法は？

instagramをブログやサイトに埋め込むためにはAPIを利用します。
instagramの公式APIを利用するためには、instagramのデベロッパー登録をしておく必要があります。

デベロッパー登録は事前に完了しておくこともできますが、以下の流れのなかで新規登録することも可能です。
まずinstagramAPI（https://www.instagram.com/developer/）にアクセスして、通常のinstagramアカウントでログインします。

ログインが完了したら、画面中央にある「Register Your Application」というボタンをクリックしてください。
ページが切り替わると、画面右上に「Register a New Client」というボタンが表示されるのでクリックしてください。
さらにページが切り替わりクライアントIDの登録情報を入力します。
このとき「Details」と「Security」という2つのタブが表示されていることを確認してください。

「Details」タブの各項目を入力します。
「Application Name」ではアプリ名を入力してください。

続いて「Description」ではアプリの概要説明を入力します。
「Website URL」にはタイムラインを埋め込む予定のウェブサイトのURLを入力し、「Valid redirect URIs」には承認後にリダイレクトされるURLを入力してください。

次に「Security」タブに移ります。
デフォルトでは「Disable implicit OAuth」にチェックが入っていますが、これを外してください。
これだけできたら「Register」をクリックして完了します。
切り替わった画面に表示される「CLIENT ID」を控えておきましょう。登録作業は以上で完了です。

そして「https://instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【Valid redirect URIs】&response_type=token」へアクセスします。
【CLIENT ID】は先程の画面で控えた「CLIENT ID」と置き換え、【Valid redirect URIs】は登録時に設定したURLと置き換えてください。
アクセス後のページには「This app is in sandbox mode and can only be authorized by sandbox users.」というアラートが表示されるので、「Authorize」をクリックして承認します。

すると【Valid redirect URIs】で設定したURLにリダイレクトされるでしょう。
この時のアドレスバーには、指定したURLに続いて「#access_token=」から始まる英数字の羅列が表示されています。
これが付与されたアクセストークンとなるので、控えておきましょう。
このアクセストークンをphpなどに組み込むことによって、ウェブサイトやブログでinstagramのタイムラインを表示できるようになるのです。

外部サイトでタイムラインの埋め込みをするには？

instagramのタイムラインを埋め込むには、APIを使わない方法もあります。
InstaWidgetという外部サイトのサービスを利用するのです。

まずInstaWidget（https://instawidget.net/）にアクセスします。
「早速作ってみる」というボタンをクリックしてください。
「無料インスタグラムブログパーツ作成」というページに遷移するので、埋め込みたいinstagramに関する情報を入力していきます。
ページ下部にはプレビューが用意されているので、必要な場合は自分好みのデザインにカスタマイズしてください。

最後に「埋め込みコードを取得」というボタンをクリックすれば、埋め込みコードを取得できます。
取得した埋め込みコードを、HTMLファイルなどに貼り付けることで、instagramのタイムラインを表示させることができるのです。

instagramの個別投稿の埋め込みをする方法は？

instagramでは、個別投稿を埋め込むことも可能です。
まず対象のinstagramのページにアクセスしてください。

次に右上にある人型のアイコンを選択します。
続いて、貼り付けたい投稿の写真を選択してください。
個別投稿画面が表示されるので、右下の「…」を選択し、続いて「埋め込み」を選択します。
「埋め込みコードをコピー」を選んでコードを取得してください。

取得した埋め込みコードを、掲載したいサイトやブログのHTML部分に貼り付けることで、instagramの個別投稿を表示できます。

埋め込んだ写真のサイズを変えるための方法は？

埋め込んだinstagramが大きすぎる場合、コードの一部を変更することでサイズを変えることができます。
埋め込みコード内の「max-width: 658px」という部分を探してください。
この数字部分を変更することで好みのサイズに変更できるでしょう。

埋め込みはやり方さえわかれば難しくない！

instagramの埋め込みをする方法はいくつか存在します。
APIを利用する方法もあるため、Web制作などの経験がない方は、難しいと感じてしまうかもしれません。

しかし上記で紹介した手順をふむことで、誰でも迷うことなく、instagramのタイムラインや個別投稿を、ブログやサイトに埋め込むことができるでしょう。
instagramの個別投稿やタイムラインが表示されると、ユーザーは華やかな印象を抱きます。

その効果はアクセスアップなどにも影響するかもしれません。
そのためウェブ担当者は、instagramの埋め込み方法を、きちんと理解しておく必要があるのです。

この記事を友達にシェアしよう！ ツイートするシェアする

この記事が気に入ったらいいね！しよう

ソーシャルラボの最新情報をお届けします

関連タグ Instagram タイムライン