Business is where people are. And people spend hours on social media each day sharing their experiences, feelings, thoughts, and purchases. This internet culture has become a vital part of a business’s online presence, and to be successful, businesses need to relate to social media in one way or another.

Social platforms can be integrated into mobile apps and websites with different goals, from making onboarding more convenient to spreading the word about your product across additional marketing channels. Here we’ll explore the social media instruments for your business and the way of integrating Facebook and Instagram into your Android mobile app and your web platform.

77% of users prefer to register and log in via social networks, and 60% gladly use social login on mobile

3 ways to integrate social media into your website

Onboarding and login

It’s more convenient for users to log into accounts with third-party services via their Facebook profiles than to register a new account with each service.

According to Annex Cloud, 77% of users prefer to register and log in via social networks, and 60% gladly use social login on mobile. According to some reports by Loginradius, over 90% of users prefer to sign in with already existing accounts on social platforms.

The most popular platform for signing up and logging in is Facebook. Google+ used to be second on the list, but that will change, as Google has announced it will be shutting down Google+.

social media login
Facebook is the most popular social media that allows to use its credentials to login into other websites’ profiles

These are the main reasons why users love social login:

  • No need to remember usernames and passwords
  • Quick to sign up and log in
  • Easy content sharing
  • No need to deal with incoming emails

Does your business need this log in through social platforms? Look for yourself:

  • Social login increases conversions by 15–20%
  • Products get shared on social platforms
  • More information on the target audience

Social proof

Did you know that people are 80% more likely to purchase a product they saw their friend shared on their Facebook? More stats for you: 85% of people trust product reviews as much as they trust the opinions of their friends and families!

Add a Like box FB widget to your web platform to show how many people love your products.

Adding photos from Instagram to your web platform instantly makes your marketing strategy more effective.

85% of people trust product reviews as much as they trust the opinions of their friends and families

Redirect people from your website to your Instagram account and use a whole range of social media marketing tactics to attract and retain users.

Social sharing buttons

Sharing buttons are a must for almost every website. Adding them is simple, and can be done either by using special plugins or by adding a few lines of code.

social media sharing website
Social sharing buttons are a must for almost any modern website. You can use plugins to implement it. Best practice is to customize the buttons according to your own website’s style

Social sharing buttons allow users to share your products on their social media profiles and also reflect how popular each product is. This tool can spread the word about your website and products.

Now I’ll give you a detailed tutorial on integrating Facebook and Instagram into your mobile application.

How to integrate Facebook into your mobile app

Integrating the Facebook SDK

To get Facebook’s features easily, you want to integrate their SDK. These are components you can choose from:

  • Facebook Core SDK (includes Analytics)
  • Facebook Login SDK
  • Facebook Sharing SDK
  • Facebook Places SDK
  • Facebook Messenger SDK
  • Facebook App Links SDK

To implement and SDK, add one of these implementation statements to your build script:

implementation 'com.facebook.android:facebook-core:[4,5)'
implementation 'com.facebook.android:facebook-login:[4,5)'
implementation 'com.facebook.android:facebook-share:[4,5)'
implementation 'com.facebook.android:facebook-places:[4,5)'
implementation 'com.facebook.android:facebook-messenger:[4,5)'
implementation 'com.facebook.android:facebook-applinks:[4,5)'

You can also download and integrate the Audience Network SDK for Android to monetize your app with ads using different types of them and the Native Ad API.

Facebook Login SDK

The Login SDK gives an ability for users to login with their Facebook credentials. When people log in to your app, they can grant permissions so you can retrieve information from their Facebook profiles or perform actions on Facebook on their behalf.

     1. After adding the implementation statement to the dependencies{} section in your gradle file, you should create strings for your Facebook App ID and for those you need to enable Chrome Custom Tabs:

[APP_ID]
fb[APP_ID]

     2. Add the following meta-data element, an activity for Facebook, and an activity and intent filter for Chrome Custom Tabs inside your application element in AndroidManifest.xml:

<meta-data android:name="com.facebook.sdk.ApplicationId" 
        android:value="@string/facebook_app_id"/>
    
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
       <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>

To get your Facebook App ID, you need to register and configure your app in the Facebook Developer Console. You won’t be able to use FB APIs and SDKs without an ID.

     3. The next step is to set up and configure the Facebook Developer Console:

  • Associate your package name and default class with your app
  • Generate development and release key hashes and add them to the console
  • Enable single sign-on for your app

Make sure your app configuration is complete. Some mandatory fields are different for the development and release apps — release apps might require some additional information. Also, don’t forget to switch the app to Live in the FB Console.

     4. Adding LoginButton is the easiest thing you can do to enable FB login on your website. You can find it in the SDK. The LoginButton is a UI element that contains features for the LoginManager.

When the button is clicked on, login starts to work according to the permissions from LoginManager.

The button follows the login state and displays the correct text based on a user’s authentication state.
You can add a LoginButton via XML or create it in code:

<com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"/>

This button uses the default UI and already has Facebook’s strings, colors, and so on. If you want to change some parts of the button’s UI, you can always extend the LoginButton or parents and configure it yourself.

      5. You can customize LoginBehavior, DefaultAudience, ToolTipPopup.Style, and permissions for the LoginButton:

loginButton = (LoginButton) findViewById(R.id.login_button);
loginButton.setReadPermissions(Arrays.asList(EMAIL));
// If you are using in a fragment, call loginButton.setFragment(this);

     6. Create a callbackManager to handle login responses by calling CallbackManager.Factory.create.

You can register a callback to the LoginButton in your onCreate method (for activities) or onCreateView method (for fragments). You can also add the LoginManager callback to your activity’s or fragment’s onCreate method.

To respond to a login result, you need to register a callback with either LoginManager or LoginButton. If you register the callback with LoginButton, you don’t need to register the callback with LoginManager.

  callbackManager = CallbackManager.Factory.create();

    LoginManager.getInstance().registerCallback(callbackManager,
            new FacebookCallback() {
                @Override
                public void onSuccess(LoginResult loginResult) {
                    // App code
                }

                @Override
                public void onCancel() {
                     // App code
                }

                @Override
                public void onError(FacebookException exception) {
                     // App code   
                }
    });

If login is successful, the LoginResult parameter will have the new AccessToken and the most recently granted or declined permissions.

      7. Finally, in your onActivityResult method, call callbackManager.onActivityResult to pass the login results to the LoginManager via callbackManager. Every activity and fragment that you integrate with the Facebook Login or Facebook Share SDK should forward onActivityResult to callbackManager.

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        callbackManager.onActivityResult(requestCode, resultCode, data);
        super.onActivityResult(requestCode, resultCode, data);
    }

     8. You don’t need a registerCallback for login to succeed. You can choose to follow current access token changes with the AccessTokenTracker class. This class can be extended to receive notifications of access token changes.

The AccessTokenTracker.startTracking method, automatically called in the constructor, and the AccessTokenTracker.stopTracking method should be called in the onDestroy method of the receiving activity or fragment.

The AccessTokenTracker.onCurrentAccessTokenChanged(AccessToken, AccessToken) method that will be called with the access token changes.

Sharing

In your project, you should add the following compile statement to the dependencies{} section in the build.gradle file to compile the latest version of the SDK:

compile ‘com.facebook.android:facebook-share:[4,5)’
You also need to set up a ContentProvider in your AndroidManifest.xml where {APP_ID} is your app ID:

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

Photos & videos

Share Dialog is an instrument that allows users to share media content like photos and videos. To make it possible, a user needs a native FB app and 7.0 version.

For photos:

Bitmap image = ...
SharePhoto photo = new SharePhoto.Builder()
.setBitmap(image)
.build();
SharePhotoContent content = new SharePhotoContent.Builder()
.addPhoto(photo)
.build();

For videos:

 Uri videoFileUri = ...
ShareVideo = new ShareVideo.Builder()
        .setLocalUrl(videoUrl)
        .build();
ShareVideoContent content = new ShareVideoContent.Builder()
        .setVideo(video)
        .build();\

Multimedia

Users can share a combination of photos and videos from your app to Facebook with the Share Dialog. They must have version 7.1 or higher of the native Facebook for Android app installed to share a maximum of six photos and videos at a time.

SharePhoto sharePhoto1 = new SharePhoto.Builder()
    .setBitmap(...)
    .build();
SharePhoto sharePhoto2 = new SharePhoto.Builder()
    .setBitmap(...)
    .build();
ShareVideo shareVideo1 = new ShareVideo.Builder()
    .setLocalUrl(...)
    .build();
ShareVideo shareVideo2 = new ShareVideo.Builder()
    .setLocalUrl(...)
    .build();

ShareContent shareContent = new ShareMediaContent.Builder()
    .addMedium(sharePhoto1)
    .addMedium(sharePhoto2)
    .addMedium(shareVideo1)
    .addMedium(shareVideo2)
    .build();

ShareDialog shareDialog = new ShareDialog(...);
shareDialog.show(shareContent, Mode.AUTOMATIC);

How to integrate Instagram into your Android mobile app

To integrate Instagram into your app, your first step is to register it in the Instagram developer console.

You’ll receive an OAuth client_id and client_secret assigned to your app.

Authentication

OAuth 2.0 protocol is necessary for using Instagram API. Note that you need to make the API requests using HTTPS and not HTTP. Remember to store access_tokens securely, as they are unique for each user and they are necessary for authentication requests from users.

To receive an access_token, do the following:

  1. If a user is entering the website, use Instagram authorization URL. In case they aren’t logged in, they’ll be asked to submit their credentials through Instagram. They’ll also be asked for a permission to use their Instagram data.
  2. Then there are two ways in which a user will be redirected:

Server-side flow (recommended): Redirect the user to a URI of your choice. Take the provided code parameter and exchange it for an access_token by POSTing the code to the access_token URL.

First step: Direct your user to the Instagram authorization URL.

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

A user will see a login screen of Instagram and another screen for confirming that they give you access to their Instagram data.

Second step: Receive the redirect from Instagram.
After your app is granted the permission to use Instagram data, use this code parameter to issue a redirect to a redirect_uri:

http://your-redirect-uri?code=CODE

Make sure your redirect ULI host and path components correspond to a registered redirect_uri. If you need dynamic behavior variability, you can add other query parameters into redirect_uri.
If you registered the next redirect URI as http://yourcallback.com/?this=that, the http://yourcallback.com/ URI will not be valid, since for the redirected URI http://yourcallback.com/?this=that&another=true is valid in this case.

Third step: Request the access_token.

At this stage you have to replace the received code with an access token. To do this, POST this code with some identification parameters of the app to the access_token endpoint. These are the parameters you’ll need:

  • client_id
  • client_secret
  • grant_type — authorization_code is currently the only supported value
  • redirect_uri — the redirect_uri you used in the authorization request.
  • code — the exact code you received during the authorization step

Use this code (with the retrofit Android library) to get the access token from https://api.instagram.com/:

@FormURLEncoded 
@POST("oauth/access_token") 
Call getAccessToken( 
@Field("client_id") String client_id, 
@Field("client_secret") String client_secret, 
@Field("grant_type") String grant_type, 
@Field("redirect_uri") String redirect_uri, 
@Field("code") String code);

If successful, you’ll get an OAuth Token you can use for authenticated calls to the API. You should retrieve the access_token String and basic information about «user».

Implicit flow: Instead of handling code, we can include the access_token as a fragment (#) in the URL. This method is less secure, so we won’t consider client-side (implicit) authentication. However, this method does allow applications without any server component to receive an access_token.

Login permissions (scopes)

The OAuth 2.0 specification allows you to specify the scope of access you’re requesting from the user. All approved apps have basic access by default, but if you plan on asking for extended access such as to read public content, like, comment, or manage friendships, you’ll need to specify these scopes in your authorization request. Note that in order to use these extended permissions, you must first submit your app for review.

You should only request the scope you need at the time of authorization. If in the future you require an additional scope, you may direct the user to the authorization URL to grant that additional scope. If you attempt to perform a request with an access token that isn’t authorized for that scope, you’ll receive an OAuthPermissionsException API error message.
To request multiple scopes at once, simply separate the scopes by a space. In the URL, this equates to an escaped space (“+”). So if you’re requesting the likes and comments permissions, the parameter will look like this:

scope=likes+comments

Sharing

An Android app can push videos and photos only via the Instagram app and Android Intents. When a user wants to share photos or videos using Instagram, you should use Android Intents to open media in Instagram’s sharing flow.

The Intent will then prompt the user to select the application they wish to send the media to. When triggered, Instagram will immediately present the user with the crop screen.

private void createInstagramIntent(String type, String mediaPath){
    // Create the new Intent using the 'Send' action.
    Intent share = new Intent(Intent.ACTION_SEND);
    // Set the MIME type
    share.setType(type);
    // Create the URI from the media
    File media = new File(mediaPath);
    Uri uri = Uri.fromFile(media);
    // Add the URI to the Intent.
    share.putExtra(Intent.EXTRA_STREAM, uri);
    // Broadcast the Intent.
    startActivity(Intent.createChooser(share, "Share to"));
}

For sharing photos, pass MIME type = «image/*» to the setType method of the Intent; for videos, use MIME type = «video/*».

The filename and mediaPath variables should contain the correct path to the shared file. For example:

String filename = «/myVideo.mp4»;

String mediaPath = Environment.getExternalStorageDirectory() + filename;

You can also create an Intent for the Instagram app target:
Intent intent = getPackageManager().getLaunchIntentForPackagecom.instagram.android«);

If this Intent is null, it means that the Instagram app isn’t installed on the device and you can navigate the user to the Instagram page on the Google Play Store to install it.

Make sure that your shared file has read permission. You can get the file URI via FileProvider and add the Intent.FLAG_GRANT_READ_URI_PERMISSION flag to your Intent.

intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
Uri contentUri = FileProvider.getUriForFile(this, BuildConfig.APPLICATION_ID + ".FileProvider", f);
intent.putExtra(Intent.EXTRA_STREAM, contentUri);

You can also pass your media description to the Instagram app via the Intent.EXTRA_TEXT extra in the Intent object. This text will be predefined in the Instagram app on the share screen, and the user can edit this message. Example:
intent.putExtra(Intent.EXTRA_TEXT, tags);

Now you know how to integrate both Facebook and Instagram into your Android mobile application. Contact us for more information on integrating these and other social media services into your website or Android app. We’ll make sure that your social media integration doesn’t just provide the same features everyone else has but is something that brings you loyal clients.

Mobile development services

Are you planning to expand your business online? We will translate your ideas into intelligent and powerful ecommerce solutions.

Get a Free Consultation!
Request Callback

Request Callback

+