ブログBlog

今回は、備忘録も兼ねてInstagramとの連携について記載させて頂こうと思います。

具体的には、Instagramから記事の内容を取得し一覧表示を行い、該当記事をクリックした際には、その詳細内容を表示するといった方法になります。FacebookのGraph APIを使います。

(注意事項:2021/9/15時点の情報です。)

Agenda

前提条件

本項の記載は、既に以下を実施済みの方を対象にしています。

  1. Instagramアカウント/Facebookアカウントを保有
  2. Facebookアカウントに、Instagramアカウントを紐づけ
  3. Facebook開発者アカウントの保有

もし、まだの人は、Googleなどの検索エンジンでそれぞれのやり方について、お調べ頂きお手続きください。

 

全体の流れ

  1. トークンの発行
  2. トークンの有効期限を無期限にする
  3. InstagramビジネスIDの取得
  4. Facebook Graph APIを使用したプログラムを作成
  5. 出力したHTMLをCSSでレイアウトを整える
  6. 実際に出力してみた例

 

それでは実際にやっていきましょう!

1.トークンを発行する。

Facebook グラフ API explorerにアクセスし、トークンを取得していきます。

(1)Facebook グラフ API explorerにアクセスします。

https://developers.facebook.com/tools/explorer/

※2021/09/15現在のバージョンはv12.0です。

(2)右側のアクセストークンの画面で設定します。

Facebookアプリ:既に作成済みのFacebookアプリを指定します。

ユーザーまたはページ:ユーザ―アクセストークンを取得を指定します。

ユーザーアクセストークン

Facebookアプリとユーザーアクセストークンを指定

 

(3)アクセス許可に下記の項目を追加します。

※2021/9/15時点で、今回11項目を追加しています。

  • Events Groups Pages

・business_management

・pages_manage_ads

・pages_manage_engagement

・pages_manage_metadata

・pages_manage_posts

・pages_read_engagement

・pages_read_user_content

・pages_show_list

  •  Other

・instagram_basic

・instagram_manage_comments

・instagram_manage_insights

アクセス許可

合計11個指定しています。

 

(4)「Generate Access Token」ボタンを押下します。

Generate Access Tokenボタン

「Generate Access Token」ボタンを押下します。

 

(5)発行されたトークンは後で使いますので、エディターに貼り付けておいて下さい。

アクセストークンのコピー

コピーしエディターなどに貼り付けておきます。

 

2.トークンの有効期限を無期限にします。

発行されたトークンの有効期限はデフォルト2時間ですので、無期限にします。

(1)本設定には、「アプリID」と「app secret」が必要となります。マイアプリから取得します。

マイアプリの指定

マイアプリを指定します。

 

(2)「アプリID」と「app secret」をエディターなどにコピーしておきます。

「アプリID」と「app secret」

「アプリID」と「app secret」をメモしておきます。

 

(3)下記のURLにブラウザでアクセスし、発行されたトークン(以降、「トークン2」と呼びます。)をメモしておきます。

※【アプリID】、【app secret】、【トークン】は前の項でメモした値をいれてください。

以下のような形で返却されてきますので、「トークン2」として保存しておきます。

 

(4)下記URLにブラウザでアクセスします。

※【トークン2】は前の項でメモした値を入れて実行してください。

 

(5)発行されたIDをエディターなどにコピーしておきます。

 

(6)下記URLにブラウザでアクセスします。

※「前の項で取得したID」と「トークン2」は前の項でメモした値を入れて実行してください。

 

(7)発行されたトークン(以降、トークン3と呼びます。)をエディターなどにコピーしておきます。

このトークン3が有効期限が無期限のトークンとなります。

 

(8)念のため、トークン3が無期限になっているかを確認します。

アクセストークンデバッカーにアクセスし、トークン3を入力後、「デバッグ」ボタンを押下します。

有効期限の確認

トークン3を入力し「デバッグ」ボタンを押下

 

有効期限が「受け取らない」になっていれば、無期限になっています。

有効期限の確認

有効期限が「受け取らない」になっているかを確認

 

3.InstagramビジネスIDの取得

(1)グラフAPIエクスプローラーにアクセスします。

https://developers.facebook.com/tools/explorer/

(2)アクセストークン欄にトークン3を入力した状態で、InstagramビジネスID取得のファンクションを実行します。

アクセストークン欄にトークン3の入力

アクセストークン欄にトークン3を入力します。

InstagramビジネスIDを取得

入力欄に「me?fields=instagram_business_account 」を入れて、送信ボタンを押下

 

(3)発行されたInstagramビジネスIDをコピーしておきます。

 

4.Facebook Graph APIを使用したプログラムを作成

JavaScript(jQuery利用)からFacebook Graph APIを使って、Instagramから記事を取得し表示するプログラムをここでは例として挙げます。

(PHPの事例は多くあったので、今回はJavaScriptで)

 

5.出力したHTMLをCSSでレイアウトを整える。

次に出力したHTMLをCSSで整えます。あくまでも例です。リスト表示をクリックするとモーダルで開くようにしています。

 

6.実際に出力して見た例

INSTAGRAM

弊社のInstagramの内容をリスト表示しています。クリックすると詳細を確認できます。

  • 2021-11-23rishuntrading_limited

    弊社の地元、所沢の認定NPO法人 自立支援ホーム 「とことこの家」さんに10万円寄付させて頂きました。小さな会社なので、大きな寄付はできませんが、こういった活動をしていらっしゃる方に、協力できるよう、これからもがんばっていきたいと思います。 #とことこの家 #rishuntrading

  • 2021-11-21rishuntrading_limited

    Will Partners様のWebサイトを制作させて頂きました🎉。岡山県倉敷市で独自性の高い日本の商品を海外バイヤーへ販売している事業者様です👏詳しくは弊社Webで。 #willpartners #webサイト制作 #ホームページ制作 #rishuntrading

  • 2021-10-27rishuntrading_limited

    Japan IT Weekの展示会へ参加してきました。活用できるものがあれば活用していきたいと思います😃

  • 2021-10-08rishuntrading_limited

    株式会社リンク様のwebサイトを制作しました🎉 北海道を中心に防犯カメラやオフィスオートメーション機器、セキュリティ通信機器などの販売、リース、設置、保守まで一貫して行なっている企業様です。弊社サイトでプレスリリース😃 #株式会社リンク #webサイト制作 #rishuntrading

  • 2021-09-19rishuntrading_limited

    散歩をちょっと遠出して、所沢の航空公園まで😃。所沢に来る事があれば是非。

  • 2021-09-08rishuntrading_limited

    「トータルリペアエフ企画」様のWebサイトを制作させて頂きました。弊社Webサイトでプレスを出させて頂きました🎉 #トータルリペアエフ企画 #rishuntrading #webサイト制作

  • 2021-09-01rishuntrading_limited

    「ボイストレーニングTRENTA」様、「保険見直し鑑定団」様のWebサイトを制作させて頂きました。弊社Webサイトにてプレスリリースを出させて頂きました🎉 #ボイストレーニングTRENTA #保険見直し鑑定団 #rishuntrading #webサイト制作

  • 2021-07-08rishuntrading_limited

    ご紹介できなかった過去分も含め、弊社サイトでご紹介させて頂きました。 「CHOCOLA de APRON」様 「里葉」様 「I-Oウェルス・アドバイザーズ株式会社」様 #CHOCOLAdeAPRON #里葉 #IOウェルスアドバイザーズ #rishuntrading #webサイト制作

  • 2021-05-17rishuntrading_limited

    株式会社newsit様、不二商栄株式会社様のWebサイトを制作😀。弊社サイトでご紹介させて頂きました🎉 #株式会社newsit #不二商栄株式会社 #rishuntrading #webサイト制作

  • 2021-05-08rishuntrading_limited

    株式会社ピカリトカチ様「グループホーム ピカリ」のWebサイトを制作👏弊社プレスリリースでご紹介させて頂いております。 #webサイト制作 #グループホーム ピカリ #rishuntrading

  • 2021-04-28rishuntrading_limited

    司法書士・行政書士のだまゆみ事務所様のWebサイトを制作🎉弊社プレスリリースでご紹介してます😊 #webサイト制作 #司法書士・行政書士のだまゆみ事務所 #rishuntrading

  • 2021-04-12rishuntrading_limited

    結婚相談所の経営や、Webコンサルティング事業などを行なっているウェブ屋様のWebサイトを制作。弊社プレスリリースで公開☺️ #webサイト制作 #ウェブ屋 #Rishuntrading

×

 

以上が、Instagramとの連携表示となります。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU