NEWS ABOUT Solution WORKS TEAM BLOG お問い合わせ JP EN

【完全保存版】FacebookのAPIを使って画像を取得!(第1回 / 全3回)

こんにちは!スパイスワークスの屋台骨(自称)ことシステムエンジニアの長澤です!
私事ですが、最近FacebookのgraphAPIを使う機会がありました。以前にも他のSNSのAPIを使って開発した経験がある為どうせそれと同じような感じだろうと高をくくっていたら・・・

「あれ?日本語の新しいドキュメントが無い!」

「アプリ登録?アクセス権限?どうすればいいの?」

なんて状態に陥りました。

でもどうにかこうにか目的のアプリを完成させるまでに至りましたので、これを機会に同じ悩みでお困りであろう皆さまにもお教えしたいと思い筆を走らせました!
※バージョンや環境等によりうまくいかない場合もあります。

○このようなアプリを作ります

Facebook認証で許可したユーザのアクセストークンを取得し、そのアクセストークンでユーザが投稿した最新のタイムライン画像を表示

 

○パートは全3回

①Facebookのアプリ登録(このブログ記事です)
②graphAPIの使い方(※近日公開予定)
③Facebookのアプリ申請(※近日公開予定)
※紹介する画像の表記は全てEnglishとなります。

 

それではLet’s Try!!

 

■Facebookアカウントを用意

これが無いとはじまりません。アカウントが無い方は以下のサイトから登録しましょう。
https://www.facebook.com/

 

■開発者登録

まずはFacebookアカウントを開発者登録する必要があります。

 

①以下のサイトから開発者登録をします。
https://developers.facebook.com/

 

②画面右上の「Register」ボタンをクリックすると、開発者登録用モーダルウィンドウが出てくるのでyesを選択し、Nextボタンをクリック

dev_1

 

③電話番号を登録し、SMSか電話を選択する。

dev_2

 

④その後認証コードが送られてくるので入力しSubmitボタンをクリック。

dev_3

 

⑤以下の画面が表示されれば成功です。Doneボタンをクリックして画面を閉じてください。

dev_4

■アプリ登録

アプリを使用するプラットフォームと、ドメインを登録する必要があります。

①右上のMy AppsからAdd a New Appを選択してください。

apli_0

 

②Websiteを選択してください。

apli_1

 

③右上のSkip and Create App IDを選択してください。

apli_2

 

④以下の項目を入力してください。
・Display Name:アプリまたはウェブサイトの名前
・Contact Email:連絡先メールアドレス
・Category:該当するカテゴリ

apli_3

 

⑤不正なアプリ登録を防止する為にセキュリティーチェックがあります。題目が表示されるため、適切な画像を選択してください。

※題目と画像はアクセスするたびに異なります。

apli_4

 

⑥サイドメニューのSettingのBasicタブにある以下の項目を入力してください。
・App Domains:サイトドメイン

apli_8

 

⑦上記画像の下の+Add Platformボタンをクリックしモーダルウィンドウの中からWebsiteをクリックしてください。

apli_6

 

⑧Site URLを入力してください。

apli_7

 

以上でアプリ登録は完了となります。

結構簡単だとは思いますが、最初はすごく躓いた所でもあるので、既に知っている方もおさらい程度に見て頂くと良いかも知れません。

次回は実際にAPIを使用し、画像を取得してみましょう。

長澤 諭
ひとつ前の投稿 ひとつ前の投稿
ひとつ前の投稿 ひとつ前の投稿 スパイスワークスの屋形船の会が面白い件について