instaglamの投稿画像をWebページへ掲載するには

  • このエントリーをはてなブックマークに追加
Instagramの投稿をWebページへ掲載するには
2019年1月30日追記
2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。
ご了承ください。
この記事にある実装方法では、設置ができない可能性があります。
phpを使った埋め込みをご紹介しますので、そちらを参照ください。
第73回:phpを使ってインスタグラムの投稿をページに掲載する方法

インスタへ投稿した写真をホームページにも掲載する

instaglamを使って写真を投稿している方も多いのではないでしょうか。
オシャレに見える写真から集客アップ!インスタ映えする風景・背景・お料理からのお客さんの見込みが増えたりしますよね。
アカウントを使って、更新を開始!!せっかくだから自社のページにも掲載してアピールしたい!!なんて方はいませんか?
その投稿した写真をホームページにも掲載する事もできるんです。

投稿をページに反映させるにはJavaScriptを使います。
必要なファイルはこちら(https://github.com/potomak/jquery-instagram)からダウンロードしてご利用ください。

そしてhead要素内に

<script src=”js/instagram.js”></script>
<script>
$(document).ready(function() {
$(“.instagram”).instagram({ /*表示させるboxを指定*/
show: 5, /*表示件数*/
userId: “000000000”, /*instagramより取得(http://jelled.com/instagram/lookup-user-id)*/
accessToken: “0000000000.xxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”, /*APIを使用するためのInstagram Developerへ登録して取得*/
clientId: “xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx” /*APIを使用するためのInstagram Developerへ登録して取得*/
});
});
</script>

を書き込みます。
「.instagram」で指定した要素内に投稿写真が掲載されます。
このclass名は任意の名称へ変更できるので、ページ構造に合わせて変更しても大丈夫です。

さて、これだけでは投稿は反映されません。
userId(クライアントID)・accessToken(アクセストークン)・clientId(クライアントID)をそれぞれ取得する必要があります。
それぞれの情報を取得するには、instaglamへ開発者登録します。

登録はこちら(https://www.instagram.com/developer/)からおこないます。
投稿を反映させたいinstagramのユーザーでログインしてください。

・・・英語のページが出ても閉じてはいけません・・・
画像を交えながら説明していきます。

まずはcliantIDを取得します。
さらにRedirect URIも必要になるので、設定します。

cliantIdを使ってaccessToken(アクセストークン)を取得する

このアクセストークンが重要です。また取得が少し厄介で、よくつまづきます・・・
取得にはブラウザのアドレスバーに
「https://api.instagram.com/oauth/authorize/?client_id=&redirect_uri=&response_type=token」を入力します。
にはcliantId(クライアントID)
にはRedirect URIを入力します。

するとRedirect URIで設定したWebページが表示されると思います。
そのアドレスバーに注目してください。ソレがアクセストークンです。
もし転送されない場合は、ブラウザを変えて試してみてください。

アクセストークンは「#access_token=」の後ろの英数字です。忘れずに保存しておきましょう。

最後にuserId(ユーザーID)ですが、これはアクセストークンの前10桁の数字になります。

以上で必要な情報が全て取得できました!
最初に書いたJavaScriptにそれぞれの値を入力しましょう!!

最後に開発者画面にてチェックを外した「Disable implicit OAuth」を思い出してください。
チェックが外れたままではセキュリティ面で問題が残るので、チェックを付けて更新することを忘れずに作業してください。

アクセストークンの取得がつまづきポイント

このアクセストークンの取得でよくつまづきます。
理由はよくわかりませんが、うまくリダイレクトしてもらえず、エラーが帰ってくるんです。
そんな時はブラウザを変えてURLを入力してみてください。

まとめ

・「instagram.js」を使って、Webサイトにinstagramの投稿写真を反映させることができる
・設置にはJavaScritpの他に3つの情報が必要
・それぞれの情報の取得にはinstagramの開発者として登録が必須
・開発者として登録するユーザーは設置したいinstagramのユーザーでログインして利用する

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

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください