June 12, 2014

How to add Facebook 'Like' button in Android app?

Official Facebook SDK does not provide implementation of theirs plugin 'Like' for Android. There is just html-plugin designed for web-sites and applications. Let's try to adapt this plugin for Android!

In this post we will look at the two things:

Using Facebook 'Like' button for single page

Just add single-line dependency in your gradle project:

dependencies {
    compile 'com.shamanland:facebook-like-button:0.1.8'
}

This library contains several widgets:

FacebookLikeButton - button which opens FacebookLikeActivity by clicking on it.


FacebookLikeBox - button with a specific background and with ability to check 'likes' count of your url.


FacebookLikePlugin - container which combines both FacebookLikeButton and FacebookLikeBox in different variations.


So, first you need is to include FacebookLikeButton with specified style in your layout:

<com.shamanland.facebook.likebutton.FacebookLikeButton
    style="@style/Widget.FacebookLikeButton"
    />

Before configuring your button you need to add app xml namespace into the root node:

xmlns:app="http://schemas.android.com/apk/res-auto"


Add following attributes to your button: pageUrl - original url of page which should to be liked, pageTitle - title of this page, pageText - short description of page, pagePictureUrl - url of page picture.

<com.shamanland.facebook.likebutton.FacebookLikeButton
    style="@style/Widget.FacebookLikeButton"
    app:pageUrl="http://your.site.com/page.html"
    app:pageTitle="Title of your page"
    app:pageText="Short description of your page"
    app:pagePictureUrl="http://your.site.com/picture.png"
    />

For example:



Do not forget to declare FacebookLikeActivity in your AndroidManifest.xml:

<activity
    android:name="com.shamanland.facebook.likebutton.FacebookLikeActivity"
    android:label="@string/com_shamanland_facebook"
    android:theme="@style/Theme.Facebook.Like"
    />

Make sure that you have internet permission:

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

That's all! Now you can compile and launch your app. When user clicks 'Like' button, then he will see WebView with official web-plugin 'Like' from Facebook:

Now, if you want to include box with count of 'likes' - you should use FacebookLikePlugin:

<com.shamanland.facebook.likebutton.FacebookLikePlugin
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <com.shamanland.facebook.likebutton.FacebookLikeButton
        style="@style/Widget.FacebookLikeButton"
        app:pageUrl="http://your.site.com/page.html"
        app:pageTitle="Title of your page"
        app:pageText="Short description of your page"
        app:pagePictureUrl="http://your.site.com/picture.png"
        />
    <com.shamanland.facebook.likebutton.FacebookLikeBox
        style="@style/Widget.FacebookLikeBox"
        app:calloutMarker="left"
        />
</com.shamanland.facebook.likebutton.FacebookLikePlugin>

Modified example:


Note about attribute calloutMarker: if you re-arrange 'like' and 'box' buttons, then you need to select corresponding value for calloutMarker: left, top, right, bottom.

Using Facebook 'Like' button in the ListView


There is no fundamental difference between single button and buttons inside ListView. You need just to set up button inside your Adapter.getView() method.

Use corresponding getters of class FacebookLikeButton: setPageUrl(), setPageTitle(), setPageText(), setPagePictureUrl().

NOTE: @style/Widget.FacebookLikeButton already has item android:id with the value R.id.com_shamanland_facebook_like. Use this value with method findViewById(). You can also override android:id in xml to use your own value.

Check this code example from library sources:
Well, I hope my library will help somebody to make awesome app with social features. Feel free to ask me anything, subscribe to repository and check for updates.

Project page: http://blog.shamanland.com/p/facebook-like-button.html
Sources: https://github.com/shamanland/facebook-like-button

Labels: , , , ,