ブログ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-07-01
    2024-07-01rishuntrading_limited

    愛知県にて不動産の売買事業などを行う名西トラスト不動産様のサイトを制作させて頂きました🎉。弊社サイトで、制作事例としてご紹介させて頂きました☺️。 #名西トラスト不動産 #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-06-20
    2024-06-20rishuntrading_limited

    RishunTradingでは、千葉県を中心に、埼玉、茨城、東京の不用品回収・引っ越しゴミ、遺品整理などを行うプライムリユース様のWebサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました😊 #プライムリユース #rishuntrading #webサイト制作

  • rishuntrading_limited_2024-06-19
    2024-06-19rishuntrading_limited

    RishunTradingでは、東京都港区にて広報・PR業務の代行やPR企画立案/実施、出版業や広告代理店等の業務を行うTOKYOコミュニケーションズ株式会社様のサイトをフルリニューアルさせていただきました🎉弊社サイトにてご紹介させていただきました😊 #東京コミュニケーションズ #rishuntrading #webサイト制作

  • rishuntrading_limited_2024-05-29
    2024-05-29rishuntrading_limited

    東京都杉並区にて建築物の設計や工事の監理を行う株式会社SOLID様のコーポレイトサイトを制作させて頂きました🎉。弊社サイトで弊社の制作事例としてご紹介させて頂きました😊。 #solid #rishuntrading #webサイト制作

  • rishuntrading_limited_2024-05-07
    2024-05-07rishuntrading_limited

    不二商栄株式会社様のコーポレイトサイトをフルリニューアルさせて頂きました🎉以前も弊社にて制作させて頂きましたが、デザインが古くなってきたこと等もあり、今回もご依頼いただきました。弊社サイトにてご紹介させて頂いております😊 #不二商栄株式会社 #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-05-01
    2024-05-01rishuntrading_limited

    作業拠点を所沢駅から徒歩1分のシェアオフィスに移転しました😊。皆さまのご期待に沿えられるよう引き続き研鑽してまいります。対面でのお打ち合わせや送付物はこちらのシェアオフィスになります。同時に一緒に所沢で働いて頂ける方も募集しております。詳細は弊社サイトにて掲載しております。 #thebranch #rishuntrading

  • rishuntrading_limited_2024-04-28
    2024-04-28rishuntrading_limited

    金融・決済業界を中心にコンサルティングや研修・講演・セミナー等を行う株式会社Optimorrow様のサイトを制作させて頂きました🎉。弊社サイトにて、制作事例として掲載させて頂きました😊。 #optimorrow #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-04-19
    2024-04-19rishuntrading_limited

    ITソリューションなどの事業を展開する「株式会社三正総研」様のコーポレイトサイトを制作させて頂きました🎉。弊社サイトに制作事例として掲載😊。ご依頼ありがとうございました。 #三正総研 #コーポレイトサイト製作 #rishuntrading

  • rishuntrading_limited_2024-04-11
    2024-04-11rishuntrading_limited

    「おもちゃ投資ラボ」様のLPを制作させて頂きました🎉以前にWebサイトや会員制サイトなど弊社にて制作させて頂いたお客様です!この度、会員数も順調に増え、おもちゃ投資をより多くの方に知っていただきたい!との事で弊社に制作依頼がございました。弊社の制作事例として弊社サイトにてご紹介させて頂いております😊。 #おもちゃ投資ラボ #ラインディングページ #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-04-10
    2024-04-10rishuntrading_limited

    保護犬・猫と共に暮らす障がい者グループホーム「Akala」様のWebサイトを制作させていただきました🎉。弊社サイトにて、弊社の制作事例としてご紹介させていただいております😊。 #グループホームAkala #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-03-29
    2024-03-29rishuntrading_limited

    RishunTradingでは、「株式会社ZEエナジー」様のWebサイトを制作させていただきました🎉弊社サイトにて制作事例としてご紹介させて頂いております😊 #zeenergy #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-03-25
    2024-03-25rishuntrading_limited

    東京都台東区にて不動産の売却、不動産購入の仲介を事業を行う株式会社IREAS様のコーポレイトサイトを制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させて頂きました😊 #IREAS #webサイト制作 #rishuntrading

 

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

WEB DESIGN

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

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

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

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

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

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

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

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

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

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

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU