インスタグラムの投稿を埋め込む！サイトにタイムラインを表示する方法は？

自分のブログやwebサイトにインスタグラムのタイムラインを埋め込み出来るのをご存じでしょうか？アフィリエイトなどブロガーにとってはTwitterなどのSNSとの連動は重要になってくると思います。なぜなら拡散するものが増えれば増えるほど多くの人に見られる可能性が増えるからです。

また実際にインスタグラムとホームページを連動させて自社のアピールを上手く行っている会社もあるので是非参考にしてみてください。その一覧も後半の方に紹介します。

しかし実際、FacebookやTwitterに比べてインスタグラムを埋め込むのは、少し複雑に感じるかもしれません。ですが実は簡単にホームページにインスタグラムを埋め込みできるので、今回を機にブログやサイトと連動させてみてください。
 

それではインスタグラムの埋め込み方法についてご紹介いたします。まずは埋め込みコードを入手したいので、インスタグラムで埋め込みたい投稿を開いてください。

投稿を開いたら、右下にある点が３つ横に並んでいるアイコンをクリックしてください。

すると色々な選択の一覧が表示されますので、｢埋め込み｣を選んで、クリックしてください。

埋め込みを選択すると、上記の様に画面が変わると思います。あとは青で囲まれている｢埋め込みコードをコピー｣を選ぶだけです。

埋め込みコードのコピーが完了すると、上記のように表示されます。以上がインスタグラムで埋め込みコードを取得する方法です。

先ほどコピーした埋め込みコードをホームページやブログにペーストすれば、貼り付けが完了です。

ホームページやブログに埋め込んだ写真のサイズを変更したい場合はまず、「max-width:658px」と書かれているコードを探してください。これは画像の幅が最大658ピクセルということなので、これより少ない数値であれば変更可能です。

次にインスタグラムの投稿ではなくタイムラインをサイトへ埋め込みする方法を紹介します。インスタウィジェットとInstagram APIの両方でのやり方を説明しますが、インスタウィジェットの方が簡単にできるのでおすすめです。

これからInstaWidget(インスタウィジェット)を使って、インスタグラムのタイムラインをサイトへ埋め込みする方法をご紹介いたします。まずはインスタウィジェットのサイトに移動してください。

作成画面の一覧では様々な設定ができます。
 

1. ユーザー名のところには自分のアカウントの名前を入れてください。
2. ブログパーツ幅は基本300にして置いて大丈夫です。
3. ユーザーアイコンの表示または非表示を変えられます
4. ユーザー紹介文ではインスタグラムのユーザー紹介文の表示または非表示を変更できます。
5. フォローボタンの表示または非表示を選べます。
6. フォロワーの数を表示するか選択できます。
7. 外枠とはこのインスタグラムブログパーツの外枠の表示または非表示にできます。

ブログパーツの設定が完了したら、埋め込みコードの取得を選択してください。あとは表示されたコードをコピーして自分のウェブサイトやブログのウィジェットを表示したい場所にペーストしてください。以上でインスタウィジェットを使ってタイムラインをサイトへ埋め込みが完了です。

次にインスタグラムAPIを使って、インスタグラムのタイムラインをサイトへ埋め込みする方法を紹介します。まずはInstagram APIのサイトに移動して、サイト内の登録を完了させてください。

英語で沢山書いてありますが、重要なのは以下のものだけです。

Application Name：任意の名前を記入してください。
Description：任意の内容を記入してください。
Website URL：ホームページのURLを入力してください。
Contact email：メールが飛んでくる宛先です。

これらの情報を記述できれば「CLIENT ID」を作れます。

次にインスタグラムの投稿を埋め込むメリットや注意点について説明します。埋め込みをすることで、自社のインスタグラムアカウントを連動して効率的にアピール出来たり、ユーザーのレビューの魅力を高めてくれます。

インスタグラムの投稿を埋め込むことによる得られるメリットは沢山あります。上手に自分のサイトと連動させることで莫大な利益を得ることも可能です。

企業に関わらず個人でやっているサイトを多くの人に見られるようにしたい誰もが思っています。フォロワーを増やすことは決して簡単なことではありませんが、インスタグラムなどのSNSと連動させることで効率的にアピールできます。

自社インスタグラムアカウントを連動して効率的にアピールすることで、その商品の売り上げや会社の認知度も上げられます。

自分の会社の商品などを一般のユーザーがインスタグラムに投稿することは、その商品のレビューと同じ価値に値します。その投稿のいいねや視聴回数など目に見えてその投稿の影響力がわかってしまいます。影響力のある投稿はユーザーのレビューの魅力を高めてくれます。

次はインスタグラムをホームページやブログに埋め込む時の注意点をご説明します。メリットだけでなく、注意点の事も知っておくべきです。企業など投稿を拡散したい場合はもちろんインスタグラムのプロフィールは公開にするべきです。これが非公開になっていると世界中に発信されないので気をつけてください。

また投稿する際にGPSを使って、その写真をどこで撮られたか載せることが可能です。観光スポットやシェアしたい場所なら公開することをおすすめしますが、プライバシーが気になるという方は使わない方が安全です。

他人の投稿やタイムラインを埋め込んだ場合、そのユーザーがそのタイムラインや投稿を削除してしまうとエラー表示になってしまいます。エラー表示になってしまった時は、埋め込みコードを消すか、他のユーザーの投稿やタイムラインを埋め込んでください。

埋め込む場合、インスタウィジェットを使った方が簡単にできまるものの、簡単な分カスタマイズ度も低くなってしまいます。カスタマイズ度を上げるにはインスタグラムのAPIを使うことをお勧めします。ただしAPIの利用にはプログラミングの知識も必要になってくるので気をつけてください。

それではインスタグラムで実際に埋め込みをしているサイト一覧を紹介します。いくつかの会社を例にインスタグラムと自社のホームページを上手く連動しているものをあげます。

自社のサイトとインスタグラムを連動させてお洒落に商品をアピールしています。清潔でクリーンな印象のサイトです。

さぬきうどんの写真を「#さぬきうどん未来遺産」または「#さぬきうどん未来遺産プロジェクト」とハッシュタグを付けて投稿すると、このサイトに載せてもらえるシステムになっています。おいしそうな写真が沢山並んでいてとても魅力的です。

#ギフマチックとハッシュタグを付けて投稿すると、ここのWebサイトに載せてもらえるシステムになっています。岐阜の観光名所をインスタグラムと連動してPRできるサイトになっています。

ぬいぐるみを日常に溶け込ませたかわいい投稿が特徴的です。見ているだけで癒やされるサイトです。

以上がインスタグラムで実際に埋め込みをしているサイトの一覧です。このサイトの一覧を見ても分かるように色々なジャンルの会社がインスタグラムの埋め込みをしています。

いかがでしたでしょうか？ホームページやブログにインスタグラムを埋め込むことは簡単にできたと思います。また埋め込む時のメリットや注意点も理解して、実践してみてください。インスタウィジェットの方が簡単に埋め込みができますが、もっと拘りたい場合はAPIを利用する方がおすすめです。


インスタグラムで実際に埋め込みをしているサイトの一覧を見てもわかるように、沢山の企業がインスタグラムとホームページを連動させています。是非これを参考にインスタグラムの埋め込みを挑戦してみてください。