This is a quick post to show you how to build a simple directive in AngularJS to get photos and videos from Facebook. The directive will open a popup to user could select photos using $uibModal service of UI Bootstrap and also use $service to manage APIs call to Facebook.

Create and integrate a Facebook app

First, you can follow this link https://developers.facebook.com/apps/ to create a Facebook app. Copy the SDK script and put into your Angular app to intergrate it.

And you also need to config your Facebook app domain. If you want to run locally, you can set localhost domain to your app.

After you created successfully, default your app only have approval to get photos and videos from your Facebook account which you used to create the app. To get photos and videos from another Facebook account, you have to ask Facebook to accept user_photos and user_videos role to your app, but you can do that later. And now you can follow below steps with your Facebook App ID to build a photos selector.

Create a Facebook service

You can explore all Facebook APIs to use them in your app at Graph API Reference and debug them at Graph API Explorer


Create a Facebook directive

This is the directive when we complete.


First time, we should ask users to approve user_photos and user_videos permissions to access their photos and videos from Facebook. You can read more FB.login() function at Facebook SDKs Document


After user approve permissions, open the modal using $uibModal service and the template file facebook_selector.html in source code.



Then loading all albums. But we can't get Videos folder from Facebook, we can only get all videos uploaded by user. So we need to add a Videos folder manually.


Finally, just need to use Angularjs to catch event and call APIs to load photos and videos then returning data chosen by user.

Link demo and source

You should open index.html (recommend) in source code instead of index.php because index.php file is used for demo on heroku server

About

Hi, my name is Nguyen. I'm living in Ho Chi Minh, Vietnam. This blog is to share my ideas and experiences. Hope it is helpful for you and our community!

Popular Posts