ブログBlog

Instagramとの連携方法(2023年2月更新)

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

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

(注意事項:2023/2/21時点の情報です。)

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/

※2023/02/21現在のバージョンはv16.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」をエディターなどにコピーしておきます。

「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の入力

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

 

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

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.実際に出力して見た例

  • rishuntrading_limited_2024-01-29
    2024-01-29rishuntrading_limited

    ネイルサロンやスポーツ関連事業(指導者派遣、イベント開催)などを行う合同会社キッカケ様のコーポレイトサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました☺。 #合同会社キッカケ #rishuntrading #webサイト制作

  • rishuntrading_limited_2024-01-26
    2024-01-26rishuntrading_limited

    近隣の他県からもご利用のある滋賀県の自動車販売事業者「合同会社G-STYLE」様のWebサイトをフルリニューアルさせて頂きました🎉。弊社サイトでご紹介させていただきました☺ #gstyle #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-01-16
    2024-01-16rishuntrading_limited

    オーガニックサイエンス株式会社様のコーポレイトサイトを制作させていただきました🎉。弊社サイトでご紹介させていただきました☺😊 #オーガニックサイエンス株式会社 #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-01-15
    2024-01-15rishuntrading_limited

    東村山市の中村造園様のWebサイトを制作させて頂きました🎉。弊社サイトでご紹介☺️ #中村造園 #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-18
    2023-12-18rishuntrading_limited

    コインランドリーの新店舗立ち上げ、コインランドリーのM&Aなど、コインランドリーに特化した事業を行う「株式会社キョウエイ」様のコーポレイトサイトを制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #株式会社キョウエイ #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-13
    2023-12-13rishuntrading_limited

    株式会社サクライト様のECサイト(ワインの販売サイト)を制作させて頂きました🎉。弊社の制作事例として弊社サイトにてご紹介させて頂きました😊。 #株式会社サクライト #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-12
    2023-12-12rishuntrading_limited

    COZY様のサービスサイト「COZYキャリア」を制作させて頂きました🎉弊社のWebサイト制作事例として弊社サイトでご紹介させていただきました😊。 #COZYキャリア #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-11
    2023-12-11rishuntrading_limited

    「南総建株式会社」様のコーポレイトサイトをリニューアルさせて頂きました🎉。弊社制作事例として弊社サイトにてご紹介させていただきました😊。引き続きご支援させて頂く予定です。 #南総建株式会社 #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-08
    2023-12-08rishuntrading_limited

    オンライン履歴書作成サイト「TSUNAGU」様のサイトを制作させて頂きました🎉。スマホ1つで履歴書を作成し、募集先へ簡単にシェアできるのが特長です。弊社の制作事例として弊社サイトにてご紹介しております😊。 #履歴書作成 #tsunagu #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-04
    2023-12-04rishuntrading_limited

    会員制コミュニティを運営するPRIME GATE様の会員制サービスサイトを制作させて頂きました🎉。弊社サイトに制作事例として掲載させて頂きました😊。 #primegate #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-11-24
    2023-11-24rishuntrading_limited

    板橋区の全個室インドアのゴルフ練習場「ゴルフランド」様のWebサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました😊 #ゴルフランド #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-11-13
    2023-11-13rishuntrading_limited

    都心を中心に鍼灸院・整骨院などを展開している「TRIGGER鍼灸院」様のまとめサイトを制作させて頂きました🎉。弊社サイトにてご紹介させて頂いております😊。 #trigger鍼灸院 #Webサイト制作 #rishuntrading

 

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

WEB DESIGN

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

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

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

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

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

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

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

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

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

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

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU