Facebook Plugin

Facebook SDK for iOS and Android allows developers to use some Facebook features with your app such as sharing pictures, updating status from your app to Facebook or getting user information, user friends. Facebook SDK uses its own application if it is already installed on the device or uses dialog for interacting with user. With Smartface Facebook Plugin, we already implemented Facebook SDK 4.x for Android and iOS with single code base. Let's get started! If you already setup your application on Facebook Developers Panel, you can skip the Installing Smartface Facebook Plugin

Please note

Smartface Plugins will only work in publish project, you are not able to use plugins on Smartface Emulators.

Creating Facebook Application

First create your Facebook Developer Account on Facebook Developers. After that, select the My Apps tab from the right of the page's header and click on Add a New App button

Enter your application name and your contact info.

Be careful, you will use this Display Name inside your Smartface Facebook codes.

We created our application. Now, let's go to the Application Dashboard and note our applicationId. You can follow your application metrics and application settings from this dashboard.

Please note, screenshots may change.

Creating Android Application on Facebook Developers

Go to application settings from Dashboard and click Add Platform and select Android

Enter your application's package name in the Google Play Package Name field and Smartface's Main Activity package name in the Class Name field as io.smartface.android.A Enter your release sign key hash in the Key Hashes field and save changes.

How to get default sign keys?

Smartface android emulator and player have default sign keys. You have to enter these value in the Key Hashes field.

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
var keys = Facebook.android.hashKeys;

Generating release sign key hash

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64

Using your own sign key

You should use your own sign keystore file. For using you own keystore file, go to you Dashboard. Click to Deployment/Cloud Build. Select Android Keystores and upload your keystore file to the Cloud.

Add internet permission to the manifest on workspace/config/Android/AndroidManifest.xml.

XML/HTML/SVG
XML/HTML/SVG
<uses-permission android:name="android.permission.INTERNET"/>

You can give application id with manifest or programmatically. To give application id by manifest:

XML/HTML/SVG
XML/HTML/SVG
<application>
...
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="\ {APP_ID}"/>
...
</application>

For sharing videos with Smartface Facebook Plugin, you should add Facebook's File Provider to project manifest on workspace.

XML/HTML/SVG
XML/HTML/SVG
<application>
...
<provider
android:authorities="com.facebook.app.FacebookContentProvider{APP_ID}"
android:name="com.facebook.FacebookContentProvider"
android:exported="true"/>
...
</application>

Finally, copy FacebookAndroid.zip under plugins/Android/FacebookAndroid.zip and configure project.json file on workspace/config/project.json.

JavaScript
JavaScript
{
// ...
"build": {
"input": {
"android": {
// ...
"plugins": {
"facebookandroid": {
"url": "",
"path": "plugins/Android/facebookandroid.zip",
"active": true
},
// ...
},
},
// ...
},
// ...
}
}

Configuration Completed for Android

Now, you can use Smartface Facebook Plugin for Android!

Creating iOS Application on Facebook Developers

Go to application settings from Dashboard and click Add Platform and select iOS

Enter your application's bundle id in the Bundle ID field.

Now let's configure plist file on workspace/config/iOS/Info.plist.

XML
XML
...
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb{APP_ID}</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>{APP_ID}</string>
<key>FacebookDisplayName</key>
<string>{APP_NAME}</string>
...
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>
...

Finally, copy facebookios.zip under plugins/iOS/facebookios.zip and configure project.json file on workspace/config/project.json.

{
// ...
"build": {
"input": {
"ios": {
// ...
"plugins": {
"facebookios": {
"url": "",
"path": "plugins/iOS/facebookios.zip",
"active": true
},
// ...
},
},
// ...
},
// ...
}
}

Configuration Completed for iOS

Now, you can use Smartface Facebook Plugin for iOS!

Installing Smartface Facebook Plugin

You can install Smartface Facebook Plugin with:

  • Open scripts/package.json

  • Add sf-plugin-facebook as dependency.

  • Run npm i on terminal inside scripts/ .

{
"dependencies": {
//...
"sf-plugin-facebook": "1.0.0"
//...
}
}

Plugin Files on GitHub Releases

You can download plugin files on Smartface Facebook Plugin's GitHub releases.

Using Smartface Facebook Plugin

Setting Application ID and Name Programmatically

If you didn't configure your plist for iOS and manifest for Android, you can set these values programmatically too.

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
Facebook.applicationId = '280115889091464';
Facebook.applicationName = "SFNativeFrameworkTest";

If you didn't set application id and name via manifest and plist, you should set these values before using Facebook plugin.

Login and Requesting Permissions from User

In Facebook SDK, there are permissions that you should granted before accessing them. For example if you want to access user's public profile, you should request "public_profile" permission. You can access all login permissions from Facebook Permissions Reference. All Facebook permissions group by two: read permissions and publish permissions. You should request each permission by its own group.

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
var grantedReadPermissions, grantedPublishPermissions;
var deniedReadPermissions, deniedPublishPermissions;
var accessToken;
Facebook.logInWithReadPermissions({
page: page,
permissions: ['user_posts', 'public_profile', 'user_friends', 'user_photos', 'email', 'user_about_me', 'user_hometown'],
onSuccess: function(data){
grantedReadPermissions = data.grantedPermissions;
deniedReadPermissions = data.deniedPermissions;
accessToken = data.accessToken;
},
onFailure: function(e){
alert("Failed to login: " + e);
},
onCancel: function(){
alert("Login canceled");
}
});
Facebook.logInWithPublishPermissions({
page: page,
permissions: ['publish_actions'],
onSuccess: function(data){
grantedPublishPermissions = data.grantedPermissions;
deniedPublishPermissions = data.deniedPermissions;
accessToken = data.accessToken;
},
onFailure: function(e){
alert("Failed to login: " + e);
},
onCancel: function(){
alert("Login canceled");
}
});

Please note

You should not call login methods. If you granted your permissions one time, you can make operations without login. You can check login status with Facebook.AccessToken.getCurrentToken() . If the result is null, you should login, otherwise you should check your permissions granted or not via Facebook.AccessToken.declinedPermissions too

Logout from Application

When you logout user, its access token will removed from application but user's granted permissions will not revoked, when you login again you will automatically granted previously granted permissions.

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
Facebook.logOut();
alert("Successfully Logged Out");

Making GraphAPI Request

You can use Facebook.graphRequest for making request with Facebook SDK. You can make requests like getting user info, posting user's timeline without share dialog or getting user's profile photo. Let's get user's id, name, bio, birthday, email, gender and hometown informations using Facebook.graphRequest:

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
var userId, userName, userBio, userBirthday, userEmail, userGender, userHometown;
if(Facebook.AccessToken.getCurrent !== null){
Facebook.graphRequest({
graphPath: '/me?fields=id,name,about,birthday,email,gender,hometown,work',
parameters: null,
httpMethod: Facebook.HttpMethod.GET,
onSuccess: function(data){
userId = data.userId;
userName = data.name;
userBio = data.about;
userEmail = data.email;
userGender = data.gender;
userHometown = data.hometown;
},
onFailure: function(e){
alert("Failed to request: " + e);
}
});
}
else{
// Token is null, do login
}

Let's posting new status update on user's timeline:

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
Facebook.graphRequest({
graphPath: '/me/feed',
parameters: {
'message' : "This is Smartface Native Framework Facebook Plugin!"
},
httpMethod: Facebook.HttpMethod.POST,
onSuccess: function(data){
alert("Successfully posted with graphRequest");
},
onFailure: function(e){
alert("Failed to post with graphRequest: " + e);
},
});

You can use Facebook.shareLinkContent for sharing link with description:

const Facebook = require("sf-plugin-facebook");
var shareHashtag = new Facebook.ShareHashtag({
hashTag: '#SmartfaceFacebookPlugin'
});
Facebook.shareLinkContent({
page: page,
contentUrl: 'http://www.smartface.io',
quote: "Smartface Facebook Plugin",
placeId: "572462939538226",
shareHashtag: shareHashtag,
shareMode: Facebook.ShareMode.AUTOMATIC,
caption: "Smartface Native Framework",
onSuccess: function(data){
alert("Share link succesfully completed.");
},
onFailure: function(e){
alert("Share link failed: " + e);
},
onCancel: function(){
alert("Share link canceled.")
}
});

Sharing Photos with Facebook's Share Dialog

You can use Facebook.shareLinkContent for sharing link with description:

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
const Image = require("sf-core/ui/image");
var sharePhoto1 = new Facebook.SharePhoto({
image: Image.createFromFile('images://icon.png'),
caption: "icon.png"
});
var sharePhoto2 = new Facebook.SharePhoto({
image: Image.createFromFile('images://smartface.png'),
caption: "smartface.png"
});
var shareHashtag = new Facebook.ShareHashtag({
hashTag: '#smartface'
});
Facebook.sharePhotoContent({
page: page,
sharePhotos: [sharePhoto1, sharePhoto2],
placeId: "572462939538226",
shareHashtag: shareHashtag,
shareMode: Facebook.ShareMode.AUTOMATIC,
caption: "Smartface Facebook Plugin",
onSuccess: function(data){
alert("Share photo succesfully completed.");
},
onFailure: function(e){
alert("Share photo failed: " + e);
},
onCancel: function(){
alert("Share photo canceled.");
}
});

Sharing photos on Android

For sharing photos on Android, you should write File Provider on your manifest as described in Creating Android Application on Facebook Developers.

Sharing Videos with Facebook's Share Dialog

You can use Facebook.shareVideoContent for sharing video with description.

JavaScript
JavaScript
const Facebook = require("sf-plugin-facebook");
const System = require('sf-core/device/system');
const Multimedia = require("sf-core/device/multimedia");
const Application = require("sf-core/application");
if(System.OS === 'Android'){
if(Application.android.checkPermission(Application.android.Permissions.READ_EXTERNAL_STORAGE)){
processShareVideo(shareVideo);
}
else{
Application.android.requestPermissions(1000, Application.android.Permissions.READ_EXTERNAL_STORAGE);
Application.android.onRequestPermissionsResult = function(requestCode, result){
if (requestCode === 1000) {
if(result){
processShareVideo(shareVideo);
}
else{
alert("You should grand permission.");
}
}
};
}
}
else{
processShareVideo(shareVideo);
}
function shareVideo(videoFile){
var previewPhoto = new Facebook.SharePhoto({
image: Image.createFromFile('images://smartface.png'),
caption: "smartface.png"
});
var shareVideo = new Facebook.ShareVideo({
videoFile: videoFile,
});
var shareHashtag = new Facebook.ShareHashtag({
hashTag: '#SmartfaceFacebookPlugin'
});
Facebook.shareVideoContent({
page: page,
contentTitle: "Smartface Facebook Plugin",
contentDescription: "Smartface video contentDescription",
placeId: "572462939538226",
previewPhoto: previewPhoto,
shareHashtag: shareHashtag,
shareVideo: shareVideo,
shareMode: Facebook.ShareMode.AUTOMATIC,
onSuccess: function(data){
alert("Share video succesfully completed.");
},
onFailure: function(e){
alert("Share video failed: " + e);
},
onCancel: function(){
alert("Share video canceled.");
}
});
}
function processShareVideo(callback){
pickFromGallery(function(data){
var videoFile = data.video;
callback && callback(videoFile);
})
}
function pickFromGallery(callback){
Multimedia.pickFromGallery({
type: Multimedia.Type.VIDEO,
onSuccess: callback,
onCancel: function(){
alert("canceled");
},
onFailure: function(e){
Application.onUnhandledError(e);
},
page : page
});
}

Sharing videos on Android

For sharing videos on Android, you should write File Provider on your manifest as described in Creating Android Application on Facebook Developers.