ブログBlog

Instagramとの連携方法

今回は、備忘録も兼ねて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の内容をリスト表示しています。クリックすると詳細を確認できます。

    • rishuntrading_limited画像1
    • rishuntrading_limited画像2
    • rishuntrading_limited画像3
    • rishuntrading_limited画像4
    2022-04-19rishuntrading_limited

    今回は、フランス🇫🇷生まれのスマホ収納棚「e-pause」シリーズの「TAO」をご紹介。TAOは中国語の「套(tao)」から付けられています。覆う、被せると言った意味があり、スマホを収納して(覆って)、たまには少しスマホと距離をとって、自然とのつながりや、対面でのやり取りなどを楽しみませんかという思いが込められています。njoy.jp #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading

  • 2022-04-15rishuntrading_limited

    「のりたまたまりん」様のオークションサイトを制作させて頂きました🎉「のりたまたまりん」様のレアな商品を入札形式で購入できるサイト。弊社サイトでご紹介。 #webサイト制作 #オークションサイト #ホームページ制作 #rishuntrading

    • rishuntrading_limited画像1
    • rishuntrading_limited画像2
    • rishuntrading_limited画像3
    • rishuntrading_limited画像4
    • rishuntrading_limited画像5
    • rishuntrading_limited画像6
    2022-04-13rishuntrading_limited

    今回は、クロアチア🇭🇷のプロダクト「VAU」のアイテムをご紹介。ドイツのデザイン賞を受賞したこちらの商品、日本ではあまり使われませんが、封筒を開封する専用のクールなアイテム「Curve letter opener」です。写真の通り、クロアチア🇭🇷の工房で、ひとつひとつ手作り。封筒が届くと、ワクワク🤗、普段とちょっと違った欧州の雰囲気?を味わえます。ハサミで良いじゃんと言ったらだめですよ。njoy.jp #レターオープナー #クロアチア #欧州輸入品 #vau #njoy #rishuntrading

    • rishuntrading_limited画像1
    • rishuntrading_limited画像2
    • rishuntrading_limited画像3
    2022-04-11rishuntrading_limited

    フランス🇫🇷生まれのスマホ専用収納棚e-pauseシリーズ、僕が初めてCEOのアグネスさんにお会いしたのは2019年、彼女からお聞きしたのは、「スマホは必需品だけど、せっかくの家族旅行なのに子供達が、ずっとスマホをいじっていて本当にショックだった。」とおっしゃっていました。きっかけはそれだけではないのですが、そのためになんとかしたくて、自主的にスマホと適度な距離を取れる方法はないかと考えられたのが「e-pause」です。njoy.jpで紹介してます。 #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading

  • 2022-04-08rishuntrading_limited

    研究機関:専修大学様の科研による学術研究によるWebサイトを制作しました🎉弊社サイトでご紹介させて頂いております。☺️ #webサイト制作 #rishuntrading

  • 2022-04-06rishuntrading_limited

    山口県山口市の会員制リラクゼーションサロン「音色(Neiro)」様のWebサイトを制作しました。🎉弊社サイトでご紹介させて頂きました。 #音色 #リラクゼーションサロン #webサイト制作 #rishuntrading

    • rishuntrading_limited画像1
    • rishuntrading_limited画像2
    • rishuntrading_limited画像3
    • rishuntrading_limited画像4
    2022-03-31rishuntrading_limited

    クロアチア🇭🇷のブランド「VAU」の「キャンドルホルダー」☺️。キャンドル🕯の炎が持つ揺らぎの力は、自然現象が持つ「1/fゆらぎ」のリズムを刻んでいます。ゆったりとした雰囲気を与え、リラックス効果があると言われています。古代メソポタミアのジグラートと言われる階層上の建造物から着想したデザインで、円形の段が上部に向かって伸びるイメージ。2018年ドイツのDesign award winner賞を受賞。njoy.jpで取り扱っています。 #キャンドルホルダー #コンシャスリビング #Vau #クロアチア #欧州輸入品 #njoy #rishuntrading

    • rishuntrading_limited画像1
    • rishuntrading_limited画像2
    2022-03-24rishuntrading_limited

    フランス🇫🇷生まれのありそうでなかったスマートフォン専用の収納ボックス「e-pause」シリーズ。動画でご紹介しているのは、「WAVEINABOX」というスマートフォンを収納するデザインオブジェ。フランス🇫🇷生まれの「e-pause」は、njoy.jpで販売しています。 #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading

    • rishuntrading_limited画像1
    • rishuntrading_limited画像2
    • rishuntrading_limited画像3
    2022-03-14rishuntrading_limited

    先日、国立新美術館で行われている「メトロポリタン美術館展」に行ってきました☺️ニューヨーク、メトロポリタン美術館のヨーロッパ絵画部門の改装に伴い、本来門外不出の名画が日本で展示❗️そのほとんどが日本初公開。教科書にも載っている巨匠の名画が。。その中でも私が心を奪われたのは、この作品(マリー・ドニーズ・ヴィレール)。詳しくはないですが。展示室に入った瞬間に目が合いました。絵画の大きさや迫力もそうですが、目線がこちらをずっと追いかけてきます。(ように見えます。) (写真はポストカードですが。) 日本とは違った感性を味わいたい方におすすめ。5/30までやっているそうです。njoy.jp #メトロポリタン美術館展 #欧州輸入品 #njoy #rishuntrading

  • 2022-03-11rishuntrading_limited

    フランス🇫🇷生まれのスタイリッシュなスマートフォン収納パネル「e-pause」。たまには、スマートフォンを休めよう。というちょっと変わったコンセプト☺️デジタルデトックスの流れを汲んだ新しい潮流です。。フランス🇫🇷生まれの「e-pause」は、njoy.jpで販売しています🤗 #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading

    • rishuntrading_limited画像1
    • rishuntrading_limited画像2
    • rishuntrading_limited画像3
    2022-03-09rishuntrading_limited

    クロアチア🇭🇷で2018年に立ち上げたブランド「VAU」は、もともとは、大手ビール会社の瓶のふたなどを製造していたファミリー企業PESで生まれました🎉。彼らにとって新しい試みではありましたが、素晴らしい冒険の始まりでした。 今回ご紹介するのは、「OROBORUS(ウロボロス)」という名のネックレス。ウロボロスから着想したこのネックレスは、ひねりを加えた大きなリングが特徴。ウロボロスは古代象徴の1つで自身の尾を噛んで輪となった龍を図案化したもの。循環性や永続性、無限大などを創造しています😊龍の写真はイメージ…。njoy.jp #コンシャスリビング #vau #njoy #欧州輸入品 #rishuntrading

  • 2022-03-02rishuntrading_limited

    フランス🇫🇷生まれの「e-pause」は、「禅(zen,)」の考え方にも共感😊。e-pauseは、スマートフォン専用の収納パネル。njoy.jp #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading

×

 

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

WEB DESIGN

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

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

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

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

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

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

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

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

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

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

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU