ブログBlog

Instagramとの連携方法 – 2024年度版

以前から本ページで、Instagram連携を記載しておりましたが、Facebook社からMeta社に変わり、バージョンも気づいたら20に達しておりました。そこで、今回は改めて2024年度版として記載しなおしました。

本ブログで記載しているInstagram連携とは、自社のInstagramの投稿記事のデータをInstagramから取得し、その投稿内容を自社サイトに掲載するというものです。

また、本投稿に記載している例は、Instagramの投稿記事を一覧で表示し、該当投稿をクリックすると、その内容を閲覧できるというものです。連携には、Meta社が提供するGraph APIを使用します。

(注意事項:2024年8月時点の情報です。)

Agenda

 

前提条件

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

  1. Instagramアカウント/Facebookアカウントを保有
  2. Facebookページを作成しInstagramアカウントを連携
  3. Meta for Developersアカウントを保有

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

その他、作業をするにあたっては、PCでブラウザを2つ起動して作業することをお薦めします。
また、発行されたトークンを一時的に保存しながら作業もしますので、エディター(Windowsならばメモ帳など)を起動して、作業すると良いと思います。

 

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

1.「アプリ」の新規作成

(1)Meta for Developersにアクセスし、ログインします。

https://developers.facebook.com/?locale=ja_JP

アクセスしたら、「マイアプリ」を選択して下さい。イメージとしては、本ツールで「アプリ」を作成し、このアプリを経由してInstagram投稿記事を取得するものとお考え頂ければと思います。

 

(2)「アプリ」を選択し、「アプリの作成」ボタンを押下します。

「アプリ」の選択と「アプリの作成」ボタンを押下

「アプリ」の選択と「アプリの作成」ボタンを押下

(3)ビジネス認証済みのビジネスポートフォリオを選択し、「次へ」を押下して下さい。
もし、表示がない場合には、一旦「現時点ではビジネスポートフォリオをリンクしない。」を選択して、「次へ」を押下して下さい。

ビジネスポートフォリオの選択

ビジネスポートフォリオの選択

(4)ユースケースは、「その他」を選択し、「次へ」を押下してください。

ユースケースの選択

ユースケースの選択

(5)アプリタイプは、「Business」を選択し「次へ」を押下してください。

アプリタイプの選択

アプリタイプの選択

(6)アプリの詳細を入力し「アプリを作成」を押下します。

アプリ名を追加:任意の名前を入れて下さい。(下記の画面では、”TEST”を入れています。)
アプリの連絡先メールアドレス:ご使用のメールアドレスを入れて下さい。
ビジネスポートフォリオ:このアプリにリンクするビジネスポートフォリオを選択します。

アプリの詳細

アプリの詳細

(7)「アプリを作成」ボタン後、「認証画面」が出る場合がありますので、その際には認証を完了させて下さい。

認証画面

認証画面

(8)「アプリの作成」が完了すると、当該アプリのダッシュボード画面になります。

アプリのダッシュボード画面

アプリのダッシュボード画面

これでアプリの作成は完了です。

 

 

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

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

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

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

※2024年8月現在の最新バージョンはv20です。

すでに、Meta for Developersの画面であれば、以下からアクセスします。

グラフAPIエクスプローラーの選択

グラフAPIエクスプローラーの選択

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

Metaアプリ:先ほど新規作成した作成済みのアプリを指定します。
ユーザーまたはページ:トークンを取得を指定します。

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

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

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

※今回は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個指定しています。

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

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

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

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

(6)確認画面が開きましたら、「XXXさんとして続行」を押下して下さい。

XXXXさんとして続行

XXXXさんとして続行

(7)ビジネスの選択画面が開きましたら、「現在のビジネスのみにオプトイン」を選択し、御社のビジネス(会社名)などを選択し「続行」ボタンを押下して下さい。
(必要に応じて御社ビジネスに合わせて設定して下さい。)

「現在のビジネスのみにオプトイン」を選択

「現在のビジネスのみにオプトイン」を選択

(8)アプリがアクセスするページの選択画面では、御社のFacebookページを選択し「続行」ボタンを押下して下さい。

アクセスするページの選択

アクセスするページの選択

(9)アプリがアクセスするInstagramアカウントの選択画面では、御社のInstagramアカウント選択し「続行」ボタンを押下して下さい。

Instagramアカウントの選択

Instagramアカウントの選択

(10)最後の確認画面が表示されましたら、「保存」ボタンを押下して下さい。

最後の確認

最後の確認

(11)発行されたトークンは後で使いますので、エディターに貼り付けておいて下さい。
(画像の上の赤丸の箇所を押下するとクリップボードにコピーできますので、エディターなどに張り付けられます。)
最初に発行した本トークンは、以降この中では「トークン1」と呼びます。

アクセストークンの発行

アクセストークンの発行

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

発行されたトークンの有効期限はデフォルト2時間ですので、無期限にします。
なお、グラフAPIエクスプローラはこの後も使いますので、本作業は、ブラウザのウィンドウを新規に立ち上げて作業して頂くと良いと思います。

(1)本設定には、「アプリID」と「app secret」が必要となります。アプリ→該当のアプリを選択します。

アプリを選択

アプリを選択

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

「アプリID」と「app secret」をエディターなどにコピー

「アプリID」と「app secret」をエディターなどにコピー

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

①トークン2を取得するために、ブラウザから実行するURLを作成します。エディター(Windowsならメモ帳)など活用して作成して下さい。

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

 

②実行すると、以下のような形で返却されてきますので、「トークン2」として、こちらもメモしておきます。

 

実際に実行した内容

作成したURLをブラウザで実行

作成したURLをブラウザで実行

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

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

 

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

 

実際に実行した内容

作成したURLをブラウザで再度実行

作成したURLをブラウザで再度実行

(5)再び、下記URLにブラウザでアクセスします。

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

 

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

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

 

実際に実行した内容

作成したURLをブラウザで再度実行

作成したURLをブラウザで再度実行

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

アクセストークンデバッカーにアクセスします。

アクセストークンデバッカーにアクセス

アクセストークンデバッカーにアクセス

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

トークン3の情報を確認

トークン3の情報を確認

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

有効期限の確認

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

 

4.InstagramビジネスIDの取得

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

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

※本ブログを順番に進めていれば、グラフAPIエクスプローラーの画面が立ち上げたままになっていると思います。

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

Instagram ビジネスIDの取得

Instagram ビジネスIDの取得

・アクセストークンの欄には、トークン3を入れます。
・実行するコマンドには、「me?fields=instagram_business_account」を入力します。
・最後に「送信」ボタンを押下します。

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

 

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

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

 

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

 

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

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

 

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

  • rishuntrading_limited_2024-09-09
    2024-09-09rishuntrading_limited

    台東区にてシステム委託開発やエンジニアリングサービス、DX推進サポート事業などを行う「株式会社CHT」様のコーポレイトサイトをフルリニューアルさせていただきました🎉弊社サイトでご紹介😊 #株式会社cht #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-08-27
    2024-08-27rishuntrading_limited

    大阪府堺市にて電気設備工事などを事業として行っている「アイ・シー・システムズ株式会社」様のコーポレイトサイトとECサイトをフルリニューアルさせていただきました🎉。弊社サイトでご紹介させて頂きました😊。 #icsystems #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-08-02
    2024-08-02rishuntrading_limited

    栃木県宇都宮市にある「きむら整形外科/循環器内科クリニック」様のサイトを制作させて頂きました🎉。弊社サイトにて、制作事例としてご紹介させていただきました😊。 #きむら整形外科循環器内科クリニック #rishuntrading #Webサイト制作

  • rishuntrading_limited_2024-07-18
    2024-07-18rishuntrading_limited

    東京都武蔵野市にて内装工事事業と美容事業を事業として行っている「株式会社ISSEN」様のコーポレイトサイトを制作させていただきました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #issen #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-07-17
    2024-07-17rishuntrading_limited

    オンラインダイエットで豊富な実績を持つ「ラストダイエットプログラム」様のランディングページを制作させていただきました🎉。弊社サイトに弊社の制作事例として紹介させて頂きました😊。 #ラストダイエットプログラム #webサイト制作 #rishuntrading

  • rishuntrading_limited_2024-07-16
    2024-07-16rishuntrading_limited

    和歌山県にて不登校支援などを中心に様々な事情でお悩みの方へカウンセリングを提供している「いちこの心の相談窓口」様のWebサイトを制作させていただきました🎉。弊社サイトの制作事例として掲載させていただきました😊。 #いちこの心の相談窓口 #webサイト制作 #rishuntrading

  • 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

 

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

WEB DESIGN

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

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

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

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

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

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

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

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

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

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

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU