株式会社アテンド02019年1月30日追記2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。この記事にある実装方法では、設置ができない可能性があります。phpを使った埋め込みをご紹介しますので、そちらを参照ください。第73回:phpを使ってインスタグラムの投稿をページに掲載する方法インスタへ投稿した写真をホームページにも掲載するinstaglamを使って写真を投稿している方も多いのではないでしょうか。オシャレに見える写真から集客アップ!インスタ映えする風景・背景・お料理からのお客さんの見込みが増えたりしますよね。アカウントを使って、更新を開始!!せっかくだから自社のページにも掲載してアピールしたい!!なんて方はいませんか?その投稿した写真をホームページにも掲載する事もできるんです。投稿をページに反映させるにはJavaScriptを使います。必要なファイルはこちら(https://github.com/potomak/jquery-instagram)からダウンロードしてご利用ください。Developerへ登録して取得*/});});</script>を書き込みます。「.instagram」で指定した要素内に投稿写真が掲載されます。このclass名は任意の名称へ変更できるので、ページ構造に合わせて変更しても大丈夫です。これだけでは投稿は反映されません。userId(クライアントID)・accessToken(アクセストークン)・clientId(クライアントID)をそれぞれ取得する必要があります。それぞれの情報を取得するには、instaglamへ開発者登録します。登録はこちら(https://www.instagram.com/developer/)からおこないます。投稿を反映させたいinstagramのユーザーでログインしてください。画像を交えながら説明していきます。cliantIDを取得します。URIも必要になるので、設定します。cliantIdを使ってaccessToken(アクセストークン)を取得するこのアクセストークンが重要です。取得にはブラウザのアドレスバーに「https://api.instagram.com/oauth/authorize/?client_id=■&redirect_uri=●&response_type=token」を入力します。URIで設定したWebページが表示されると思います。そのアドレスバーに注目してください。ソレがアクセストークンです。転送されない場合は、ブラウザを変えて試してみてください。アクセストークンは「#access_token=」の後ろの英数字です。忘れずに保存しておきましょう。最後にuserId(ユーザーID)ですが、これはアクセストークンの前10桁の数字になります。OAuth」を思い出してください。チェックが外れたままではセキュリティ面で問題が残るので、チェックを付けて更新することを忘れずに作業してください。アクセストークンの取得がつまづきポイントこのアクセストークンの取得でよくつまづきます。理由はよくわかりませんが、うまくリダイレクトしてもらえず、エラーが帰ってくるんです。そんな時はブラウザを変えてURLを入力してみてください。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。