Cara Daftar Dan Membuat Facebook Instant Articles Untuk Blogspot

Cara Daftar Dan Membuat Facebook Instant Articles Untuk Blogspot

Sebelumnya, saya sudah menjelaskan panjang lebar tentang pengertian Instant Articles. Maka artikel lanjutan ini hanya akan berfokus pada hal-hal berbau teknis tentang cara daftar dan membuat Facebook Instant Articles di Blogspot. Nggak usah basa-basi, langsung sikat saja tutorialnya.

F.A.Q (Frequently Asked Question)

  • Ini buat Blogger alias Blogspot kan? Bukan Wordpress?
    Iya. Ini buat Blogger / Blogspot. Bukan Wordpress.
  • Blognya harus pake custom domain atau TLD dulu?
    Nggak. Pake subdomain bawaan semisal domain.blogspot.com juga bisa kok. Nggak mesti beli domain segala.
  • Site feed wajib diset ke Full ya?
    Nggak juga. Bisa diset Full, bisa diset Short. Baca dulu aja sampe abis.
  • Katanya kalau pake Blogger alias Blogspot lebih ribet ya dibanding Wordpress?
    Iya, memang. Namanya juga gratisan. Terima aja. Yang penting udah ada panduan lengkapnya di artikel ini.

Cara Setting Facebook Instant Articles Di Blogspot / Blogger

Kamu WAJIB mempunyai Fanspage karena Instant Articles hanya bisa dibuat melalui Fanspage. Install juga aplikasi Facebook mobile (versi normal, bukan versi Lite) atau Pages Manager di smartphone biar gampang ngecek hasilnya.

Instant Articles hanya akan terbuka di aplikasi Facebook mobile dan Pages Manager saja. Jadi kalau sedang buka Facebook di FB Lite, browser handphone, apalagi di PC, tanda petir Instant Articles nggak bakal muncul. Artikel akan terbuka normal seperti tampilan aslinya.

Instant Articles hanya tersedia di perangkat iPhone and Android. Software yang dibutuhkan adalah Facebook for iPhone Versi 30.0 dan OS iOS 7.0 ke atas, atau Facebook for Android Versi 57 dan OS Jelly Bean keatas.


1. Setting Fanspage

  1. Kalau belum punya Fanspage ya bikin dulu dong. Ikuti panduan di artikel cara membuat Fanspage Facebook.
  2. Setelah punya Fanspage, buka alamat https://instantarticles.fb.com.
  3. Pilih Fanspage yang akan dibuatkan Instant Articles. Centang juga box persetujuannya. Lalu klik tombol Access Instant Articles Tools.
  4. Jika sukses, akan muncul pop-up baru. Klik saja Continue. Maka Fanspage kamu sudah mendapatkan akses Instant Articles.
    Cara Aktifkan Instant Articles Facebook
  5. Buka Fanspage dan masuk ke menu Publishing Tools.
  6. Pada menu Instant Articles, pilih submenu Configuration.
  7. Pada bagian Connect Your Site, pilih Authorize your site.
    Cara Membuat Facebook Instant Articles Untuk Blogger
    Klik untuk melihat ukuran lebih besar.

  8. Akan terdapat sebuah kode meta tag. Contohnya kaya gini nih:
    <meta property="fb:pages" content="106660612706164"/>
    Copy kodenya untuk dimasukkan ke blog.

2. Verifikasi Blog

  1. Buka akun Blogger dan pergi ke pengaturan HTML. Taruh kode tersebut DIBAWAH / SESUDAH <head>. Jangan lupa simpan pengaturan dengan klik tombol Save theme.
  2. Kembali ke Facebook. Kalau sudah melakukan langkah diatas, masukkan alamat blog dan klik tombol Claim URL.
    Cara Membuat Instant Article Facebook Untuk Blogger

Kalau masih pakai subdomain bawaan Blogspot, masukkan 3 jenis variasi domain berikut biar lebih afdol.
namakamu.blogspot.com
namakamu.blogspot.co.id
namakamu.blogspot.pe
(kadang subdomain Blogspot berpindah sendiri ke .pe)

3. Upload Logo

Trus upload logo dulu, karena biasanya akan muncul notifikasi error kalau belum upload logo. Jadi mending setting diawal.
  1. Scroll kebawah sampai ke bagian Tools. Pilih Styles dan klik tulisan default untuk mengedit template bawaan. Kalau mau bikin template baru, klik tombol +Add Style. Tapi saya lebih memilih mengedit template bawaan biar lebih simple.
    Cara Daftar Facebook Instant Articles Untuk Blogspot

  2. Pilih Logo lalu klik tombol Choose Logo untuk mulai mengupload. Gambar harus berekstensi .PNG dengan background transparan. Ukuran dimensi minimalnya adalah 690 x 132 pixels. Setelah selesai, klik Save di pojok kanan atas.
    Cara Setting Facebook Instant Articles Untuk Blogspot
    Klik untuk melihat ukuran lebih besar.

4. Setting Artikel

Masuk ke bagian penting, yaitu setting RSS Feed agar setiap postingan blog masuk ke Instant Articles. Ada dua cara yang bisa kamu coba: Otomatis dan Manual. Masing-masing punya kelebihan dan kekurangan masing-masing.
  1. OTOMATIS
    Kelebihan: Setiap artikel baru akan otomatis masuk ke Production Articles di Facebook Instant Articles.
    Kekurangan: Saat ini Blogspot belum sepenuhnya mendukung konversi tag HTML biasa ke tag HTML Instant Articles. Meskipun artikel otomatis masuk ke Production Articles, kamu masih perlu kerja lagi untuk edit beberapa tag HTMLnya. Selain itu, Site Feed harus diset ke Full. Perlu dipikirkan matang-matang karena postingan blog bisa diambil seluruhnya oleh pencuri artikel (yang nggak tahu diri) kalau feed diset ke full.
  2. MANUAL
    Kelebihan: Feed nggak perlu diset full.
    Kekurangan: Setiap artikel baru nggak bakal masuk otomatis ke Production Articles di Facebook Instant Articles. Kamu harus membuatnya manual seperti menulis artikel artikel dari awal.

Mau pilih yang mana? Itu sih terserah kamu. Kesamaan kedua metode diatas yaitu sama-sama harus kerja dua kali. Harap dimaklum ya kalau agak ribet. Blogspot nggak segampang Wordpress yang tinggal pake plugin dan semuanya bisa beres. Oke....lanjut ke penjelasan masing-masing metode.

4.1. Setting Metode Otomatis

  1. Masuk ke akun Blogger. Pergi ke menu Settings » Other » Site feed » Allow Blog Feed » pilih Full. Kalau sudah, klik tombol Save settings.
    Cara Mengaktifkan Facebook Instant Articles Di Blogspot

  2. Kembali ke pengaturan Instant Articles di Facebook. Di bagian Tools, pilih Production RSS Feed dan masukkan alamat RSS Feed ini:
    https://www.igniel.com/feeds/posts/default?alt=rss
    Ganti https://www.igniel.com dengan alamat blog masing-masing ya. Kalau sudah, klik tombol Save.
    Cara Membuat Instant Articles Facebook Di Blogger

  3. Tunggu beberapa saat sampai Facebook selesai merayapi blog lalu masuk ke submenu Production Articles. Taraaaa.....semua artikel sudah terimport secara otomatis. Biasanya nggak semua artikel bakal masuk sih. Contoh: artikel di blog ada 15. Bisa jadi yang masuk cuma 10.

    Buat platform Blogspot sangat wajar kalau masih terdapat banyak error di artikel hasil import. Kaya screenshot dibawah ini nih, artikel saya masih banyak error yang ditandai dengan icon tanda seru berwarna kuning atau merah. Kalau iconnya disorot, akan muncul petunjuk bagian mana saja yang menjadi penyebab error. Tinggal dibenerin deh dengan mengklik icon pensil. Pastikan edit semua artikel yang terdapat icon tanda seru. Agar bisa diterima oleh Instant Articles, kamu harus mempunyai minimal 10 artikel yang nggak error.
    Cara Terbitkan Facebook Instant Articles di Blogspot
    Klik untuk melihat ukuran lebih besar.


4.2. Setting Metode Manual

Metode ini mengharuskan kamu menulis ulang semua artikelnya dari awal.
  1. Kamu nggak perlu set Site feed ke Full. Cukup Short saja.
  2. Masih di halaman pengaturan Instant Articles di Facebook, masuk ke submenu Production Articles.
  3. Klik tombol +Create.
    Cara Pasang Facebook Instant Articles di Blogspot

  4. Akan muncul text editor. Tinggal tulis deh artikelnya disana. Tapi ingat hal wajib berikut:
    1. Nggak bisa ngasal tulis artikel baru YANG BELUM DIPUBLISH DI BLOG karena di Instant Articles nanti kamu harus memasukkan URL canonical asli dari artikel.
    2. Tag HTML harus diubah mengikuti format Instant Articles. Biar nggak pusing, saya kasih contoh dari tag HTML Instant Articles dibawah.

4.2.1. Contoh Tag HTML Instant Articles
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <!-- URL asli dari artikel yang sudah diterbitkan di blog. Ganti dengan URL artikel kamu sendiri -->
    <link rel="canonical" href="https://www.igniel.com/article.html">
    <meta property="op:markup_version" content="v1.0">
  </head>
  <body>
    <article>
      <header>
        <!-- Judul dan sub judul utama dari Instant Articles -->
        <h1>Judul Artikel</h1>
        <h2>Sub judul atau deskripsi</h2>
        <!-- Kicker. Biasanya dipakai untuk menuliskan kategori -->
        <h3 class="op-kicker">Kategori</h3>

        <!-- Tanggal dan waktu ketika artikel pertama kali diterbitkan di blog -->
        <time class="op-published" datetime="2018-01-10T08:00Z">10 Januari 2018, 8:00 AM</time>

        <!-- Tanggal dan waktu ketika artikel terakhir kali diupdate atau diedit -->
        <time class="op-modified" dateTime="2014-01-17T04:44:16Z">17 Januari 2018, 4:44 PM</time>

        <!-- Nama author -->
        <!-- Versi Satu: Pake URL profil Facebook -->
        <address>
          <a rel="facebook" href="http://www.facebook.com/ignielcom">igniel.com</a>
          igniel.com adalah blog yang berisi info seputar media sosial dan tutorial Blogspot.
        </address>
        <!-- Versi Dua: Nggak pake URL profil Facebook -->
        <address>
          <a>igniel.com</a>
          igniel.com adalah blog yang berisi info seputar media sosial dan tutorial Blogspot.
        </address>

        <!-- Gambar yang menjadi cover utama dari Instant Articles -->
        <figure>
          <img src="https://www.igniel.com/gambar/cover.jpg"/>
          <figcaption>Caption dari gambar</figcaption>
        </figure>     

      </header>

      <!-- START: ISI UTAMA ARTIKEL -->

      <!-- Semua text harus terbalut dalam tag <p> -->
      <p>Paragraf satu. Blablablablabla....</p>
      <p>Paragraf dua. Blablablba.....</p>
      <p>Paragraf tiga. Terus kaya gini sampai kelar.</p>

      <!-- Jika ingin masukkan gambar -->
      <figure>
          <img src="http://www.igniel.com/gambar/gambar1.jpg"/>
      </figure>

      <!-- Jika ingin masukkan video -->
      <figure>
        <video>
          <source src="http://www.igniel.com/video/video.mp4" type="video/mp4" />
        </video>
      </figure>

      <!-- Jika ingin masukkan list -->
      <ol>
        <li>Tag HTMLnya saja saja sih.</li>
        <li>Tapi biasanya nggak bisa banyak-banyak kasih list.</li>
      </ol>

      <!-- STOP: ISI UTAMA ARTIKEL -->

      <footer>
        <!-- Copyright atau tambahan tulisan kecil di footer -->
        <small>© Igniel</small>
      </footer>
    </article>
  </body>
</html>

Ganti dan sesuaikan isinya dengan artikel punya kamu sendiri ya. Dan pastinya nggak semua tag HTML diatas perlu dipake. Kalau nggak mau pake video, tinggal hapus tag HTML videonya. Begitupun kalau nggak mau pake copyright, ya tinggal hapus. Kalau sudah membuat artikel dengan format Instant Articles, copy tulisannya ke text editor yang tadi muncul trus simpan dengan klik tombol Save di pojok kanan atas.
Cara Membuat Facebook Instant Articles Di Blogger
Klik untuk melihat ukuran lebih besar.

5. Submit dan Ajukan Review

Setelah ada 10 artikel yang nggak error, kamu bisa mengajukan review. Masuk ke submenu Configuration dan klik tombol Submit for Review. Disana tertulis prosesnya butuh waktu 3-5 hari kerja. Tapi menurut pengalaman pribadi, cuma sehari juga udah keluar hasilnya.

Selama masa review, rajin-rajinlah cek halaman Configuration karena nggak ada notif ketika diterima, ditolak, atau diminta submit ulang. Kadang masih terdapat sedikit kesalahan di format penulisan artikel yang menyebabkan proses review tertunda. Kamu harus mengedit artikelnya lebih dulu untuk bisa mengajukan review ulang. Setelah diedit, klik tombol Resubmit for Review. Kalau diterima, ya Alhamdulillah. Kalau ditolak, ya coba terus.
Cara Setting Facebook Instant Articles Di Blogger

Kalau diterima, tampilannya bakal kaya gini.
Cara Membuat Instant Articles Facebook di Blogger

6. Terbitkan Artikel

Ingat, artikel yang sudah dibuat di tahap nomor 4 belum diterbitkan lho. Karena saat itu artikelnya hanya dibuat untuk proses review saja. Sekarang setelah diterima, kamu sudah bisa menerbitkannya agar bisa dibaca orang lain. Caranya kaya gini:
  1. Masuk ke submenu Production Articles.
  2. Centang kotak checkbox yang ada di paling atas tabel agar artikel terpilih semua.
  3. Pada tombol Actions, pilih Publish. Maka semua proses telah selesai.
Cara Buat Instant Articles Facebook Untuk Blogger
Klik untuk melihat ukuran lebih besar.

Perbandingan artikel sebelum dan sesudah diaktifkan Instant Articles. Akan muncul tanda petir ketika dilihat di aplikasi Facebook mobile.
How To Setup Facebook Instant Articles For Blogger Blogspot

7. Monetasi Dengan Audience Network

Bagian ini pasti kamu suka dan paling ditunggu. Yang membuat Instant Articles dapat menghasilkan dollar adalah program yang bernama Audience Network. Tapi sabar dulu. Soal itu baru akan dibahas di artikel berikutnya. Pelajari dulu saja cara daftar dan membuat Instant Articles di Blogspot yang baik dan benar, berhubung pake Blogspot emang lebih ribet.

https://developers.facebook.com/docs/instant-articles/guides/articlecreate
Baca Juga

Artikel Terkait

50 Komentar

mbak harus punya NPWP ya kalo main IA ?

Nggak perlu mas kalau belum punya.

Panjang. Mantap. Btw berapa hari nulisnua sepanjang ini? :D

Kalo ditotal ada 48 jam lah. Tapi da aku mah seterong. Termasuk kalo dicopas oge seteronggggg weeee meski nyesek :'>

Bisa dicoba.. mantab mbak, makasih sudah dibuatkan pelajaran yang panjang.

Langsung coba dah...
Penasaran sama sensasi fb instant articles...

Ngapain aja setaun?
Rata-rata pada dapet sehari dari waktu normalnya yang 3-5 hari

Instant fb articel cuma buat nambah petir doang ya mbak

Wah makasih mbak, saya sempat galau enggak bisa pake manual buat Instant Articles. Sekarang coba pake yang otomatis aja, mudah-mudahan enggak ada yg ngelirik mau copas artikel blog saya hiksss

Mastah, pada FB=IA kita bisa set cannon. Namun bagaimana ide untuk bisa juga melakukan set cannon alternate di masing-2 halaman post blog untuk Blogspot. Ataukah memang cukup sepihak saja cannon alternatenya, tanpa harus mendeklarasikan dalam blogspot bahwa yg di blogger adalah dokumen originalnya.
.
Sebelumnya makasih,

Bukan cuma nambah petir. Coba dibaca dulu pengertian Instant Articles yang linknya ada di awal artikel.

Karena artilelnya takut dicopas? Tenang mas. Kan sebelumnya udah claim URL dulu. Jadi kalau URL canonicalnya beda, artikelnya bakal gagal terproduksi.

Canonical cukup diset di IA aja.

Kalau saya mah sama nyiapin gambarnya paling sebulan.

Kan ieumah blognya anti maling bukan?

mbak kalau satu akun facebook terus di buat beberapa fanpage dan masing masing di buat IA dengan blog berbeda boleh tidak?

Iya boleh mas. Nggak apa-apa.

Oh sebentar atuh sebulan mah. Kirain setaun sekali nulisnya.

mbak url canonical apa yah soalnya gak bisa publish

URL canonical itu URL asli dari artikel.
Contohnya artikel ini. URL canonicalnya https://www.igniel.com/2018/01/facebook-instant-articles-blogspot.html

kenapa saya buka FP pas mau daftar instant artikel nya di fp malah kagak muncul confguration

tidak ada tulisan instant article di fp nya

Coba daftarnya lewat sini: https://instantarticles.fb.com

keren mbak, tapi saya masih bingung, berarti pendapatan kita berasal dari penayangan iklan dari instan article ya? trus itu berarti fanspage kita musti punya banyak like dong? supaya penayangannya banyak? pendapatan tinggi?

Iya. Semakin banyak like, semakin besar kemungkinan post untuk dilihat.
Kalo likenya belum banyak bisa coba boost pake FB Ads. Atau kalo mau gratis, promo ke grup-grup yang rame.

mba kalau boleh tau harus minimal 3 artikel yah yang dibuat ?
saya sempat dulu buat melalui cara instan, gara2 kebingungan stuck saya hapus jadinya masih kebaca di instan artikel yg saya buat dulu..pas ngulang lagi pake cara mba harus buat 3 artikel baru bisa submit review

Awal pengajuan minimal 10.

Kalo setelah review ada yang error trus diminta modifikasi, itu baru diminta 3.
Cuma modifikasi ya, diedit aja 3 artikel yang masih ada errornya. Baru ajukan review ulang.

I literally bookmarked this page and will do the steps nanti sore di rumah hehe. Thank you ya tutorialnya! :)

Mba kalau IA ini dipasang iklan adsense apa bisa ?
jika bisa tidak melanggar ?

Kalau satu akun Facebook punya dua fanpage, apakah bisa masing2 fanpage dipasani IA dari dua blog yang berbeda, Kak?
Dan sistem pembayarannya seperti apa Kak?

Iya bisa.

Sejauh ini ada dua metode. Paypal & transfer ke bank lokal Indonesia. Jadi gampang.

Makasih, Mbak Igniel. 🙏

Batu tahu blog ini dan langsung suka dengan artikel2nya. Banyak ilmu yang saya dapat. :)

Mbak, kalo fanpages yang jadi target kita untuk daftar instant artikel nggak muncul pas daftar, gimana ya solusinya?

terima kasih

Kalo gitu biasanya udah langsung ada di menu Fanspagenya.

Maaaf....
Apakah sekarang ngga bisa ?..
Masalahnya, halaman saya ketika di klik tools publishing nggak pilihan instant artikel

Daftarnya lewat sini https://instantarticles.fb.com
Trus pilih Fanspagenya dari sana.

Sudah mbak...
Tapi menggunakan android

punya saya tak setting otomatis,tpi di artikel produksi gak muncul list artikel yang sudah ada di blogspot (saya pake custom domain.co.id(niaga hoster) dengan hosting blogspot.. mhon bantuanya mbk

alhamdulillah sudah bisa.. ternyata yg di pakai domain pengalihan

Syukurlah kalau udah fix. Semangat terus ngeblognya.

Kalo blognya udah ada iklan dari adsense gimana ? apakah adsens dan IA nya aman ?

Adsense muncul di browser biasa.
Audience Network (iklan IA) cuma muncul di Instant Articles.

Kedua jenis iklan itu nggak bakal ketemu karena beda tempat munculnya. Jadi aman.

Udah buat fanspage tapi tidak ada piliha instan artikel ya ? Menunya kok ilang.

FP harus berumur minimal 1 bulan dan punya traffic yabg stabil selama sebulan terakhir.

mba, dibawah head di blog saya ada meta tag verifikasi google analystic, apa boleh meta tag nya ditumpuk mba?

Maksudnya kode meta property="fb:pages"?
Iya nggak apa-apa. Simpen aja.

Komen pakai akun asli tidak akan menurunkan harga diri kok. Buat apa pakai pakai kloningan :)