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.

Kode lengkap project ini dapat kalian unduh di sini. Selamat berkreasi ya. Jangan lupa komentar jika menemukan problema 😀