Membuat Widget Komentar Facebook di Android Studio

Plugin komentar Facebook memungkinkan pengguna untuk mengomentari url web apa pun menggunakan akun Facebook mereka. Nah, sekarang kita akan mencoba untuk membuat widget komentar Facebook di Android Studio.

Saat ini Facebook tidak menyediakan dukungan Android asli untuk plugin, tetapi di tutorial ini kita akan belajar untuk dapat mengintegrasikannya di aplikasi menggunakan WebView dan membuatnya terlihat asli.

Artikel ini tidak hanya menjelaskan cara menambahkan widget komentar fb, tetapi juga membahas cara memuat artikel lengkap, terutama saat kalian mendesain aplikasi umpan berita (newsfeed).

A. Membuat Proyek Baru

Kita akan mulai dengan menyiapkan proyek dasar dengan menambahkan file dan ikon yang diperlukan. Jadi mari kita mulai.

1 . Buat proyek baru di Android Studio dari File ⇒ New Project dengan mengisi detail yang diperlukan.

2 . Buka app/build.gradle dan tambahkan design support library dependency. Langkah ini opsional, tetapi diperlukan untuk styling toolbar nantinya.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
 
    // design support library
    compile 'com.android.support:design:23.0.1'
}

3 . Buka strings.xml dan tambahkan nilai string di bawah ini.

<resources>
    <string name="app_name">Facebook Comments</string>
    <string name="title_activity_comments">Comments</string>
    <string name="action_comment">Comment</string>
    <string name="action_refresh">Reload</string>
</resources>

4 . Unduh material drawable icon di bawah ini dan tambahkan ke folder project res . Ikon-ikon ini akan digunakan untuk floating action button dan untuk ikon toolbar.

> Comment icon (Digunakan untuk Floating Action Button)

> Refresh icon (Digunakan sebagai ikon toolbar untuk me-refresh komentar facebook)

5 . Buka styles.xml yang terletak di bawah res ⇒ values dan pastikan kalian memiliki style di bawah ini untuk mengatasi kemungkinan aplikasi crash karena toolbar.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
 
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
 
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
 
</resources>

6 . Buka AndroidManifest.xml dan tambahkan permission INTERNET . Kita dapat melihat FbCommentsActivity juga ditambahkan di sini. Kita akan segera membuat aktivitas ini.

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

Tambahkan kode berikut di AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.fbcommentwidget">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".FbCommentsActivity"
            android:label="@string/title_activity_comments"
            android:theme="@style/AppTheme.NoActionBar" />
    </application>
 
</manifest>

B. Memuat Artikel

Sekarang kita akan memodifikasi main activity kita untuk memuat artikel lengkap menggunakan WebView. Kita juga akan menambahkan floating action button yang memuat aktivitas komentar facebook.

7 . Buka file layout main activity ( activity_main.xml ) dan tambahkan kode di bawah ini. Layout ini berisi toolbar dan web view untuk memuat halaman web.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fitsSystemWindows="true">
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
 
    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_insert_comment_white_24dp" />
 
</android.support.design.widget.CoordinatorLayout>

8 . Buka MainActivity.java dan tambahkan kode di bawah ini. Di sini kita memuat url artikel firebase di web view.

package info.androidhive.fbcommentwidget;
 
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebView;
 
public class MainActivity extends AppCompatActivity {
 
    // This url contains the content of the article excluding web page's
    // header, footer, title, comments
    private static String url = "https://api.androidhive.info/facebook/firebase_analytics.html";
 
    private WebView webView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        webView = (WebView) findViewById(R.id.web_view);
 
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // launching facebook comments activity
                Intent intent = new Intent(MainActivity.this, FbCommentsActivity.class);
 
                // passing the article url
                intent.putExtra("url", "https://www.androidhive.info/2016/06/android-firebase-integrate-analytics/");
                startActivity(intent);
            }
        });
 
        // loading web page
        webView.loadUrl(url);
    }
}

Sekarang jika kita jalankan aplikasi, kita akan melihat pemuatan artikel lengkap seperti yang ditunjukkan pada gambar di bawah ini.

C. Menambahkan Widget Komentar Facebook

9 . Buat file menu fb_comments.xml di bawah res ⇒ menu dan tambahkan di bawah opsi menu dengan kode di bawah ini. Menu ini digunakan untuk menambahkan ikon refresh ke toolbar.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_refresh"
        android:icon="@drawable/ic_refresh_white_24dp"
        android:orderInCategory="100"
        android:title="@string/action_refresh"
        app:showAsAction="always" />
</menu>

10 . Buat aktivitas baru bernama FbCommentsActivity.java dan tambahkan kode di bawah ini ke file layout-nya ( activity_fb_comments.xml )

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".FbCommentsActivity">
 
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
 
    </android.support.design.widget.AppBarLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/webview_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
 
            <WebView
                android:id="@+id/commentsView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal" />
 
            <ProgressBar
                android:id="@+id/progressBar"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_gravity="center"
                android:layout_marginBottom="10dp"
                android:indeterminateTint="@color/colorPrimary"
                android:indeterminateTintMode="src_atop" />
 
        </FrameLayout>
    </LinearLayout>
 
</android.support.design.widget.CoordinatorLayout>

11 . Buka FbCommentsActivity.java dan lakukan perubahan di bawah ini. Activity ini berisi fungsi yang diperlukan untuk memuat plugin widget Facebook di WebView.

Di bawah ini adalah HTML & JS asli dari widget komentar Facebook.

<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-comments" data-href="https://www.androidhive.info/2016/06/android-firebase-integrate-analytics/" data-numposts="5" data-order-by="reverse_time"></div>
</body>
</html>

Kode ini untuk FbCommentsActivity.java

package info.androidhive.fbcommentwidget;
 
import android.net.Uri;
import android.net.http.SslError;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextUtils;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.ConsoleMessage;
import android.webkit.CookieManager;
import android.webkit.SslErrorHandler;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import android.widget.Toast;
 
public class FbCommentsActivity extends AppCompatActivity {
    private static String TAG = FbCommentsActivity.class.getSimpleName();
    private WebView mWebViewComments;
    private FrameLayout mContainer;
    private ProgressBar progressBar;
    boolean isLoading;
    private WebView mWebviewPop;
    private String postUrl;
 
    // the default number of comments should be visible
    // on page load.
    private static final int NUMBER_OF_COMMENTS = 5;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fb_comments);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 
        mWebViewComments = (WebView) findViewById(R.id.commentsView);
        mContainer = (FrameLayout) findViewById(R.id.webview_frame);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        progressBar.setVisibility(View.VISIBLE);
 
        postUrl = getIntent().getStringExtra("url");
 
        // finish the activity in case of empty url
        if (TextUtils.isEmpty(postUrl)) {
            Toast.makeText(getApplicationContext(), "The web url shouldn't be empty", Toast.LENGTH_LONG).show();
            finish();
            return;
        }
 
        setLoading(true);
        loadComments();
    }
 
    private void loadComments() {
        mWebViewComments.setWebViewClient(new UriWebViewClient());
        mWebViewComments.setWebChromeClient(new UriChromeClient());
        mWebViewComments.getSettings().setJavaScriptEnabled(true);
        mWebViewComments.getSettings().setAppCacheEnabled(true);
        mWebViewComments.getSettings().setDomStorageEnabled(true);
        mWebViewComments.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        mWebViewComments.getSettings().setSupportMultipleWindows(true);
        mWebViewComments.getSettings().setSupportZoom(false);
        mWebViewComments.getSettings().setBuiltInZoomControls(false);
        CookieManager.getInstance().setAcceptCookie(true);
        if (Build.VERSION.SDK_INT >= 21) {
            mWebViewComments.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
            CookieManager.getInstance().setAcceptThirdPartyCookies(mWebViewComments, true);
        }
 
        // facebook comment widget including the article url
        String html = "<!doctype html> <html lang=\"en\"> <head></head> <body> " +
                "<div id=\"fb-root\"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = \"//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6\"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> " +
                "<div class=\"fb-comments\" data-href=\"" + postUrl + "\" " +
                "data-numposts=\"" + NUMBER_OF_COMMENTS + "\" data-order-by=\"reverse_time\">" +
                "</div> </body> </html>";
 
        mWebViewComments.loadDataWithBaseURL("http://www.nothing.com", html, "text/html", "UTF-8", null);
        mWebViewComments.setMinimumHeight(200);
    }
 
    private void setLoading(boolean isLoading) {
        this.isLoading = isLoading;
 
        if (isLoading)
            progressBar.setVisibility(View.VISIBLE);
        else
            progressBar.setVisibility(View.GONE);
 
        invalidateOptionsMenu();
    }
 
    private class UriWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
 
            String host = Uri.parse(url).getHost();
 
            return !host.equals("m.facebook.com");
 
        }
 
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            String host = Uri.parse(url).getHost();
            setLoading(false);
            if (url.contains("/plugins/close_popup.php?reload")) {
                final Handler handler = new Handler();
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        //Do something after 100ms
                        mContainer.removeView(mWebviewPop);
                        loadComments();
                    }
                }, 600);
            }
        }
 
        @Override
        public void onReceivedSslError(WebView view, SslErrorHandler handler,
                                       SslError error) {
            setLoading(false);
        }
    }
 
    class UriChromeClient extends WebChromeClient {
 
        @Override
        public boolean onCreateWindow(WebView view, boolean isDialog,
                                      boolean isUserGesture, Message resultMsg) {
            mWebviewPop = new WebView(getApplicationContext());
            mWebviewPop.setVerticalScrollBarEnabled(false);
            mWebviewPop.setHorizontalScrollBarEnabled(false);
            mWebviewPop.setWebViewClient(new UriWebViewClient());
            mWebviewPop.setWebChromeClient(this);
            mWebviewPop.getSettings().setJavaScriptEnabled(true);
            mWebviewPop.getSettings().setDomStorageEnabled(true);
            mWebviewPop.getSettings().setSupportZoom(false);
            mWebviewPop.getSettings().setBuiltInZoomControls(false);
            mWebviewPop.getSettings().setSupportMultipleWindows(true);
            mWebviewPop.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT));
            mContainer.addView(mWebviewPop);
            WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
            transport.setWebView(mWebviewPop);
            resultMsg.sendToTarget();
 
            return true;
        }
 
        @Override
        public boolean onConsoleMessage(ConsoleMessage cm) {
            Log.i(TAG, "onConsoleMessage: " + cm.message());
            return true;
        }
 
        @Override
        public void onCloseWindow(WebView window) {
        }
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        if (!isLoading) {
            getMenuInflater().inflate(R.menu.fb_comments, menu);
        }
 
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            onBackPressed();
            return true;
        }
 
        if (item.getItemId() == R.id.action_refresh) {
            mWebViewComments.reload();
        }
 
        return super.onOptionsItemSelected(item);
    }
}

Kapan pun kalian ingin memuat komentar Facebook untuk url apa pun, mulai saja activity seperti di bawah ini dengan meneruskan url dalam intent data yang dituju.

// launching Facebook comments activity
Intent intent = new Intent(MainActivity.this, FbCommentsActivity.class);
 
// passing the article url
intent.putExtra("url", "https://www.androidhive.info/2016/06/android-firebase-integrate-analytics/");
startActivity(intent);

Jalankan aplikasi dan klik FAB untuk memuat widget komentar Facebook.