Cara Mengintegrasikan Grafik Terbuka Facebook Dengan WordPress

Protokol Facebook Open Graph memungkinkan Anda untuk berbagi konten blog Anda tidak hanya dengan pembaca Anda, tetapi juga dengan teman-teman Facebook mereka. Bagian yang terbaik adalah - kapan pun seseorang menyukai konten Anda, itu akan dipublikasikan di profil Facebook mereka. Tapi bukan itu saja, Open Graph memungkinkan Anda menjelajahi cara yang lebih menarik untuk berinteraksi dan berinteraksi dengan pembaca Anda. Pada akhirnya - jika ini dilakukan dengan benar - itu membangun merek Anda dan meningkatkan lalu lintas situs Anda.

Dalam posting hari ini, kita akan melihat ke dalam cara mengintegrasikan Facebook Open Graph dengan WordPress yang di-host-sendiri dalam panduan langkah demi langkah yang terperinci. Ini akan membutuhkan pengeditan Tema WordPress Anda yang ada dan membuat aplikasi Facebook (jika Anda belum memilikinya).

Siap? Mari jalankan browser dan editor kode favorit Anda. Panduan lengkap setelah melompat.

Langkah 1. Buat Aplikasi facebook

Kami membutuhkan ID Aplikasi dan untuk mendapatkannya, Anda harus membuat Aplikasi Facebook. Jika Anda sudah memilikinya, lanjutkan ke langkah 2.

Membuat aplikasi itu mudah, inilah yang Anda lakukan:

1. Masuk ke Facebook, buka halaman Pengembang.
2. Klik "Siapkan aplikasi baru"tombol di sudut kanan atas.
3. Beri nama ke aplikasi baru Anda, setuju ke istilah Facebook, tekan Buat aplikasi.
4. Pergi ke Situs web tab, isi alamat URL dan Domain Situs.
5. Catat nilai dari ID Aplikasi suatu tempat dan tekan tombol "Simpan perubahan"tombol.

Itu saja! Anda selalu dapat kembali lagi nanti untuk mengisi informasi selanjutnya.

Langkah 2. Ganti Menandai

Buka file header tema Anda (header.php) di editor favorit Anda. Selalu simpan salinan cadangan untuk berjaga-jaga jika terjadi kesalahan.

Cari baris kode berikut ini, atau yang dimulai dengan >

Ganti dengan:

Tetap buka header.php, kita akan membutuhkannya untuk langkah ke-3.

Langkah 3. Masukkan OG tag

Tempel kode berikut setelahnya tag, atau sebelumnya menandai.

       "/>          

Berikut adalah beberapa nilai yang perlu Anda ubah:

• Baris 3: Ganti your_fb_app_id dengan ID Aplikasi dari Langkah 1.
• Baris 4: Anda bisa mendapatkan your_fb_admin_id di bawah halaman Wawasan Facebook Anda, (Info selengkapnya). Klik pada "Wawasan untuk situs web Anda"tombol hijau, ambil seluruh string kode dan ganti Line 4.
• Baris 12: Baris ini menentukan gambar yang mewakili posting Anda. Jika tema Anda mendukung Thumbnail Posting WordPress, itu akan berfungsi dengan baik. Tetapi jika tidak, itu akan gagal dengan anggun tanpa gambar. Lihatlah Langkah 3a untuk solusi alternatif.
• Baris 19: Ganti logo.jpg dengan url ke logo blog Anda. Ini akan ditampilkan ketika halaman non-posting di blog Anda dibagikan di Facebook.

Langkah 3a - Ketika "wp_get_attachment_thumb_url" Gagal

Kapan wp_get_attachment_thumb_url () gagal berfungsi, Anda cenderung membuka atribut konten tanpa nilai, seperti yang ditunjukkan di bawah ini:

Solusi sederhana adalah mengganti Baris 12 dengan kode berikut:

Selanjutnya, buka functions.php dan masukkan kode berikut:

function catch_that_image () global $ post, $ post; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ cocok); $ first_img = $ cocok [1] [0]; if (kosong ($ first_img)) // Menentukan gambar default $ first_img = "/images/default.jpg";  kembalikan $ first_img; 

Kode penggantian ini mencoba menggunakan panggilan fungsi catch_that_image () untuk mengambil dan menampilkan URL dari gambar pertama yang dihadapinya. Ganti baris 10 dengan URL ke gambar default jika fungsi gagal menemukan gambar pertamanya.

Langkah 4. Masukkan Facebook Javascript SDK

Javascript berikut memberi Anda akses semua fitur API Grafik dan Dialog. Ini juga memungkinkan Anda untuk mengintegrasikan plugin sosial Facebook seperti tombol Suka, Facepile, Rekomendasi, dll dengan mudah.

Tempatkan di header.php, tepat setelah

Menggantikan your_fb_app_id pada Baris 4 dengan ID Aplikasi dari Langkah 1 sebelumnya.

Langkah 5. Mari kita mengujinya!

Kami selesai mengintegrasikan Grafik Terbuka Facebook ke blog WordPress. Mari kita berikan beberapa tes untuk memastikan kita telah melakukan sesuatu dengan benar.

Tes # 1 - Lihat kode sumber

Lihatlah kode sumber dari salah satu posting blog, Anda harus memiliki sesuatu seperti ini:

Periksa properti dan nilainya, pastikan semuanya benar.

Tes # 2 - Instal Kotak Suka

Jika Anda belum menginstal Tombol Suka Facebook, mungkin sekarang saatnya untuk mendapatkannya. Tempatkan kode berikut di mana saja (lebih disukai sebelum konten atau setelah konten) di dalam single.php:

Selanjutnya, cari teman Seperti saya t. Anda akan melihat sesuatu yang serupa muncul di profil Facebook-nya:

Ekstra: Plugin WordPress

Jika entah bagaimana Anda gagal menginstal kode atau perlu ini dilakukan dengan cepat dan mudah - ada plugin WordPress untuk itu.

Facebook Open Graph Meta di WordPress adalah plugin WordPress yang menambahkan data meta Facebook untuk menghindari masalah thumbnail, masalah judul salah, masalah deskripsi salah, dll.