14 January, 2017

Cara Memasang Kode Meta Tag Facebook Open Graph yang Benar

Ketika membagikan URL blog di Facebook, URL itu akan diubah menjadi tampilan ringkas atau intisari dari blog tersebut. Didalamnya terdapat komponen-komponen dari blog yang bersangkutan berupa judul, thumbnail (gambar), deskripsi, URL blog, dan nama author. Untuk mendapatkan tampilan ringkas yang sesuai dengan isi blog ketika dibagikan di Facebook, kamu perlu memasang meta tag Facebook Open Graph. Apa sih Facebook Open Graph itu? Bagaimana cara memasang Facebook Open Graph yang baik dan benar agar tampilannya bagus ketika dishare di Facebook? Simak baik-baik ya. Lagi-lagi blog Igniel akan berbagi sedikit informasi mengenai ilmu Facebook.

Cara Memasang Kode Meta Tag Facebook Open Graph yang Benar - igniel.com

Apa Itu Facebook Open Graph?

Facebook Open Graph adalah sederetan kode khusus berupa meta tag HTML yang berfungsi membaca komponen-komponen halaman ketika URL dari halaman tersebut dibagikan di Facebook untuk nantinya ditampilkan menjadi konten. Komponen yang ditampilkan berupa judul, thumbnail (gambar), deskripsi, URL blog, dan nama author. Kode Facebook Open Graph ini dapat dipasang di semua platform blog seperti Blogspot, Wordpress, dan lain sebagainya.

Kenapa Harus Memasang Facebook Open Graph?

Kamu butuh memasang Facebook Open Graph untuk menarik minat pengunjung. Dia akan membuat intisari blog kamu terlihat lebih cantik ketika dibagikan ke dinding Facebook (social media share). Tanpanya adanya kode ini, Facebook tidak akan mampu menampilkan intisari blog kamu dengan benar. Dijamin deh, pengunjung tidak akan tertarik ketika menemukan konten seperti ini. Berikut perbandingan antara blog yang memasang dan tidak memasang kode Facebook Open Graph.

Cara Memasang Kode Meta Tag Facebook Open Graph yang Benar - igniel.com

Daftar Kode Facebook Open Graph

Berdasarkan dokumen developers Facebook yang ada di Webmaster, ada 5 kode inti yang harus kamu pasang. Saya jelaskan satu-satu ya berdasarkan hasil translate dari page tersebut. Tidak 100% translate sih, saya ambil kesimpulannya saja.
  1. og:url
    URL canonical dari blog kamu.
  2. og:title
    Judul dari artikel.
  3. og:description
    Ringkasan dari isi artikel, biasanya terdiri dari 2 sampai 4 kalimat. Ditampilkan dibawah judul dari post Facebook.
  4. og:image
    Gambar atau thumbnail. Biasanya diambil dari gambar pertama yang ada di dalam artikel.
  5. fb:admins
    Nama author. Berupa sebuah URL yang dapat di-klik untuk menuju ke profil Facebook dari author bersangkutan.

Ada juga beberapa kode meta tag opsional yang dapat dipasang. Kode lengkapnya ada di bawah ini, termasuk cara pasangnya.

Cara Memasang Facebook Open Graph di Blog

Kita masuk ke bagian inti dari tutorial Facebook kali ini. Jangan ada langkah yang terlewat agar hasilnya maksimal.
  1. Masuk ke bagian Template >> Edit HTML
  2. Cari kode </head>. Untuk memudahkan mencari kode tersebut, gunakan CTRL + F.
  3. Masukkan kode berikut sebelum / diatas </head>
<!-- [ Facebook Open Graph Meta Tag by igniel.com ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/></code></pre>

PENJELASAN
  1. Jika kamu membagikan URL artikel tunggal misalnya http://www.igniel.com/2017/01/cara-pasang-facebook-open-graph-baik-benar.html, secara otomatis gambar akan diambil dari artikel tersebut. Tapi jika kamu membagikan URL blog seperti http://www.igniel.com, maka yang muncul adalah gambar yang harus kamu tentukan sendiri. Ganti https://1.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png dengan URL gambar favicon / icon blog.
  2. Ganti 106660612706164 dengan ID atau username profil pribadi Facebook, atau Fanspage juga bisa. Saran saya, pakailah ID karena dia bersifat tetap. Sedangkan username dapat diubah. Siapa tahu kamu ganti username, tapi lupa mengedit meta tagnya di blog. Kan berabe juga.

Begini tampilan akhir jika kamu berhasil memasang kodenya.

Cara Memasang Kode Meta Tag Facebook Open Graph yang Benar - igniel.com

Kenapa Gambar Saya Tidak Muncul?

Jika kamu merasa sudah menulis kode diatas dengan benar tapi gambar tidak muncul, kemungkinan besar resolusi gambarnya kurang besar. Facebook mengharuskan ukuran minimal 200 x 200 pixels. Edit lagi ya artikelnya. Buat gambarnya sesuai ketentuan Facebook.

Semua Sudah Benar. Kenapa Hasil Share di Facebook Masih Tidak Sesuai?

Itu karena Facebook butuh waktu untuk membaca ulang struktur blog kamu. Untuk cara cepatnya, ikuti langkah berikut.
  1. Masuk ke Sharing Debugger
  2. Masukkan URL blog atau URL artikel tunggal.
  3. Klik kotak Debug
  4. Klik kotak Scrape Again.
  5. Dan sim salabim! Coba share ulang URL kamu dan cek apakah sudah benar.

Cara Memasang Kode Meta Tag Facebook Open Graph yang Benar - igniel.com

Sekian artikel blog Igniel mengenai pemasangan kode meta tag Facebook Open Graph. Jangan lupa bagikan artikel ini agar teman-teman Blogger yang lain tahu. Thank you~

05 November, 2016

Cara Membuat Tulisan yang Mengandung Link Aktif di Status Facebook

Cara Membuat Tulisan yang Mengandung Link Aktif di Status Facebook - igniel.com

Normalnya, sebuah tulisan yang mengandung link aktif atau URL yang dibagikan di Facebook harus ditulis menggunakan format asli. Misalnya untuk promosi blog, kamu harus menulis alamat lengkap blognya jika ingin link itu clickable (dapat diklik).
Contoh: Kunjungi blog saya http://www.namablog.com atau bit.ly/BlogSaya

Kamu tidak bisa memanipulasi tulisan dari link yang tampil seperti pada format HTML.
Contoh format HTML: Kunjungi blog saya.

Paham kan perbedaannya?
Status Facebook mengharuskan kamu menulis alamat blog sesuai aslinya dan tidak bisa dicustom. Sedangkan pada format HTML kamu bebas menampilkan tulisan apapun yang menjadi jembatan untuk menuju ke link asli.

Facebook tidak mendukung penulisan format HTML untuk update status, komen, dan lain sebagainya. Tapi kamu bisa membuat tulisan yang mengandung link aktif di status Facebook menggunakan trik yang blog Igniel bagikan ini. Lantas apa untungnya? Ya terlihat lebih unik dan peluang untuk diklik pun lebih besar.

Cara Membuat Tulisan yang Mengandung Link Aktif di Status Facebook - igniel.com

Langkah-Langkah

  1. Trik ini harus dieksekusi di Facebook mobile. Jika kamu online di PC atau laptop, cukup buka alamat https://mobile.facebook.com
  2. Tulis kode dibawah untuk update status. Ini contoh penulisan untuk status yang ada di gambar atas. Kamu tinggal ganti seusai keinginan.
Lagi nyoba bikin @@[0:[106660612706164:1:LINK AKTIF]] di status Facebook. Ternyata @@[0:[106660612706164:1:BERHASIL]]. Trik ini bisa juga disebut @@[0:[106660612706164:1:mention someone with different name]].

Jangan lupa LIKE & kasih RATE di fanspage @[106660612706164:] biar lebih semangat nulis tutornya.

Keterangan

  1. Ganti tulisan berwarna merah dengan ID dari profil / fanspage / grup yang ingin dijadikan link aktif di status Facebook.
  2. Ganti tulisan berwarna biru dengan tulisan yang ingin dimunculkan.

Syarat dan Kondisi

  1. @@[0:[106660612706164:1:Tulisan]] digunakan jika ingin menggunakan tulisan buatan.
  2. 106660612706164 digunakan jika ingin memunculkan tulisan asli yang sesuai dengan nama profil / fanspage / grup Facebook.
  3. Kamu TIDAK BISA menghilangkan link yang mengandung tulisan asli. Jika dilakukan maka update status akan gagal. Itulah kenapa dalam contoh diatas, kondisi nomor 2 WAJIB ditulis. Yah, memang, ujung-ujungnya tulisan asli dari link tersebut akan terlihat.
  4. Ingat, ini hanya mengganti tulisan dari profil / fanspage / grup Facebook. Kamu tidak bisa menyisipkan link dari web lain.

A bit tricky, right?
Silakan dicoba membuat tulisan yang mengandung link aktif di status Facebook menggunakan cara diatas. Lumayan untuk mengundang klik karena cara ini biasa dipakai oleh Fanspage besar yang jumlah likenya sudah sangat banyak. Kalau ada kesulitan silakan tulis di kolom komentar. Begitupun kalau sukses, tulis juga :)

26 October, 2016

Cara Memanipulasi URL / Link yang Dibagikan di Facebook

Cara Memanipulasi URL / Link yang Dibagikan di Facebook - igniel.com

Pernah gak ngeliat ada orang membagikan tautan (share link) dan ketika linknya dibuka, alamatnya berbeda dengan yang tertulis di statusnya? Contohnya kaya gini nih.

Cara Memanipulasi URL / Link yang Dibagikan di Facebook - igniel.com

Itu bisa dilakukan menggunakan tools. Contoh toolsnya macem-macem. Ada phpSFP, King Poster, FBMPGP, dsb. Coba deh tanya sama temen kamu yang spammer. Pasti mereka paham maksudnya gimana.

Kali ini blog Igniel bakal ngasih tau cara memanipulasi tulisan kaya gitu TANPA menggunakan tools. Nantinya kamu bisa share link di wall sendiri (alias buat update status), ke wall temen, ke group, dan ke fanspage.

Metodenya ada 2, yaitu pake Graph Api Explorer dan pake HTTP Browser. Simak penjelasannya berikut ini.

Graph Api Explorer

Yang udah nonton video tutorial saya soal grab UID tertarget kemaren pasti ngerti maksudnya gimana. Saya sarankan nonton itu dulu deh biar bener-bener paham. Kalo belum, santai, tetep saya tulis step by step kok.
  1. Siapkan token. Caranya:
    1. Buka postingan saya tentang kumpulan token DISINI.
    2. Pilih token HTC. Sebenernya pake apa aja bisa selama udah diset permission buat ngepost, tapi kebanyakan pada pake ini.
    3. Nanti muncul kotak dialog. Pilih OK aja.
      Cara Memanipulasi URL / Link yang Dibagikan di Facebook - igniel.com
  2. Setelah muncul tulisan SUCCESS, buka alamat berikut https://developers.facebook.com/tools/explorer
  3. Tulis perintah sesuai gambar berikut.
    Cara Memanipulasi URL / Link yang Dibagikan di Facebook - igniel.com
    PENJELASAN:
    1. Di kotak pertama, isi dengan token yang sudah kita ambil tadi.
    2. Di kotak kedua, pilih metode POST. Trus tulis perintah me/feed
    3. link
      Alamat asli yang akan dituju.
    4. picture
      Alamat gambar.
    5. message
      Isi pesan / tulisan di status. Kalo pake spasi, ganti dengan tanda plus (+).
    6. name
      Judul dari link.
    7. description
      Deskripsi dari link.
    8. caption
      Nama link yang ditampilkan.
  4. Selesai? Jangan lupa tekan Submit. Kalo berhasil, hasil dari link yang di-share akan sama dengan gambar yang ada di awal artikel ini.

HTTP Browser

Ini cara yang lebih simple dan gak ribet.

  1. Siapkan token.
  2. Buka browser. Terserah mau Chrome, Firefox, Opera, Safari, dll. Browser handphone juga bisa.
  3. Ketik perintah berikut di address bar browser. Ganti yang di-highlight sesuai keinginan.
    https://graph.facebook.com/me/feed?link=http://www.igniel.com&picture=http://media.hotbirthdays.com/upload/2015/05/12/hayley-williams-25470-26153-hd-wallpapers.jpg&message=Ini+pesannya+BLABLABLABLABLA&name=JUDUL+HAHAHAHAHAHAHAHA&description=Ini+deskripsi+webnya+LALALALALALALALALA&caption=linknya.com&method=post&access_token=EAAAACZAVC6ygBAAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  4. Perlu dicatat, jika ada spasi harus diganti dengan tanda plus (+).

  5. PENJELASAN:
    1. http://www.igniel.com
      Alamat asli yang akan dituju.
    2. http://media.hotbirthdays.com/upload/2015/05/12/hayley-williams-25470-26153-hd-wallpapers.jpg
      Alamat gambar.
    3. Ini+pesannya+BLABLABLABLABLA
      Isi pesan / tulisan di status. Kalo pake spasi, ganti dengan tanda plus (+).
    4. JUDUL+HAHAHAHAHAHAHAHA
      Judul dari link.
    5. Ini+deskripsi+webnya+LALALALALALALALALA
      Deskripsi dari link.
    6. linknya.com
      Nama link yang ditampilkan.
    7. EAAAACZAVC6ygBAAXXXXXXXX
      Kode token.
  6. Kalo udah, tekan Enter di keyboard kamu.

Cara Posting ke Wall Temen / Grup / Fanspage?

Caranya sama untuk kedua metode diatas.
Perhatikan tulisan "me/feed". Cukup ganti "me" dengan ID dari teman / grup / fanspage. Misalnya "10000000011/feed".
Gampang banget kan?

Selesai. Cukup gitu aja Cara Memanipulasi URL / Link yang Dibagikan di Facebook. Lumayan kan buat nambah pengetahuan. Silakan sebarkan tutorial ini, tapi selalu cantumkan sumber asli artikelnya ya.

03 October, 2016

Mengganti Warna Address Bar Browser Handphone Agar Sesuai Layout Blog

Mengganti Warna Address Bar Browser Handphone Agar Sesuai Layout Blog - igniel.com

Ini tutorial simple tapi krusial, terutama buat yang super perfeksionis soal design blog.

Pernah liat gak, ketika buka sebuah web atau blog di handphone, warna address bar dari browser yang kamu pake berubah ngikutin layout blognya? Sepele memang. Tapi jangan salah, ini bisa bikin pengunjung agak terpukau loh. Karena address bar yang biasanya berwarna putih, malah berubah ketika dia buka blog kamu.

Mengganti Warna Address Bar Browser Handphone Agar Sesuai Layout Blog - igniel.com

Untuk mengganti warna address bar browser tersebut, caranya gampang kok. Cukup tambah beberapa baris kode aja di pengaturan template HTML blog kamu. Ini dia kodenya:

<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#2f303f' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#2f303f' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#2f303f' name='apple-mobile-web-app-status-bar-style'/>

Ganti kode warna yang di-highlight orange sesuai keinginan kamu.

Cara Memasang di Blogger

  1. Masuk ke Dashboard
  2. Pilih Template
  3. Pilih Edit HTML
  4. Copy kode di atas lalu paste tepat di atas kode </head>
  5. Terakhir jangan lupa Save.

Silakan coba sendiri dan buktikan, warna address barnya udah keganti apa belum.

Itu dia tutorial tentang cara merubah warna address bar browser di smartphone ketika membuka blog. Tinggalkan komen dan share artikel ini klo bermanfaat.

26 September, 2016

Cara Grab UID Facebook Tertarget GRATIS

Cara Grab UID Facebook Tertarget GRATIS - igniel.com

Apa itu UID?

UID, atau biasa disebut User ID, adalah serangkaian huruf dan/atau angka yang merupakan nomor induk atau tanda pengenal dari sebuah akun. Berbeda dengan username yang bisa diubah, UID bersifat permanen dan gak bisa diubah selama akun tersebut masih ada.

Contoh, Fanspage saya memiliki username ignieldotcom, maka alamat Facebooknya adalah https://www.facebook.com/ignieldotcom.
Username ini bisa aja diubah sewaktu-waktu klo saya ingin.

Beda halnya dengan UID. Mau usernamenya diganti kaya apapun, UID nya bakal tetap seperti pertama kali dia dibuat. Dalam hal ini, UID Fanspage saya adalah 106660612706164. Yang artinya Fanspage tersebut bisa juga diakses menggunakan alamat https://www.facebook.com/106660612706164.

Untuk Apa UID Tertarget?

Biasanya para Facebook Marketer menggunakan UID ini untuk mencari teman tertarget. (Baca Juga: Cara Mencari Teman Tertarget di Facebook GRATIS)
Pertama, cari UID dari orang-orang yang sudah ditargetkan.
Kedua, add teman berdasarkan UID yang sudah didapatkan.

Dengan mendapatkan teman tertarget, maka kemungkinan interaksi di akun tersebut bakal makin tinggi. Apalagi klo akun itu dipake buat jualan. Salesnya bisa sangat lumayan, karena teman-temannya sudah ditargetkan sesuai dengan produk jualan.

Bagaimana Cara Mendapatkan UID Tertarget?

Saat ini banyak beredar tools berbayar yang bisa membantu kamu buat grab UID tertarget. Tapi jika ingin, kamu bisa lho grab UID tanpa mengeluarkan uang sepeserpun. Cukup dengan membaca dan memahami Facebook, kamu bisa melakukan hal itu.

Kali ini saya akan share langkah-langkahnya. Jangan kawatir, ini bukan tutorial tentang programming. Kamu yang gak bisa coding sekalipun bisa mengikuti tutorial ini.

Disini, UID didapatkan dari:
1. Yang like sebuah postingan
2. Yang komen sebuah postingan
3. Member grup

Disimak baik-baik ya. Tonton videonya dari awal sampe akhir, jangan ada yang terlewat. Dan klo bermanfaat, SHARE aja :)

13 August, 2016

Kumpulan Token Facebook Terbaru 100% Work

Igniel - Kumpulan Token Facebook Terbaru 100% Work

Biar gak pusing nyari-nyari token Facebook, ini saya kumpulin semuanya disini. Klo ada yang belum tercantum, atau ada yang udah gak jalan, silakan komen yak. Kita saling membantu.

  1. Graph API Explorer: s.id/IgnielTokenGraphAPI
  2. Nokia: s.id/IgnielTokenNokia
  3. Nokia 808 Pure View: s.id/IgnielTokenNokia808PureView
  4. Blackberry: s.id/IgnielTokenBB
  5. Spotify: s.id/IgnielTokenSpotify
  6. Windows Phone: s.id/IgnielTokenWindowsPhone
  7. Samsung Mobile: s.id/IgnielTokenSamsungMobile
  8. Mobileblog: s.id/IgnielTokenMobileblog
  9. HTC Sense: Khusus HTC ada 2 step.
    1. Pertama, ijinkan akses tokennya disini: s.id/IgnielTokenHTC
    2. Kedua, ambil kode tokennya disini: s.id/IgnielGetTokenHTC

Itu dia kumpulan token facebook terbaru 100% work. Share klo bermanfaat. Cheers~