Bagaimana Mengintegrasikan Grafik Buka Facebook Dengan WordPress

Protokol Grafik Terbuka Facebook membolehkan anda berkongsi kandungan blog anda bukan sahaja dengan pembaca anda, tetapi rakan Facebook mereka juga. Bahagian yang terbaik adalah - setiap kali seseorang suka kandungan anda, ia akan diterbitkan pada profil Facebook mereka. Tetapi itu tidak semua, Open Graph membolehkan anda meneroka cara yang lebih menarik untuk berinteraksi dan melibatkan diri dengan pembaca anda. Akhirnya - jika ini dilakukan dengan betul - ia membina jenama anda dan meningkatkan lalu lintas tapak anda.

Dalam jawatan hari ini, kita akan melihat bagaimana untuk mengintegrasikan Grafik Terbuka Facebook dengan WordPress sendiri yang dihoskan dalam panduan langkah demi langkah terperinci. Ia memerlukan pengeditan Tema WordPress sedia ada dan mencipta aplikasi Facebook (jika anda tidak mempunyai satu).

Sedia? Mari melepaskan pelayar dan editor kod kegemaran anda. Panduan penuh selepas melompat.

Langkah 1. Buat App facebook

Kami perlukan ID Permohonan dan untuk mendapatkannya, anda perlu membuat App Facebook. Sekiranya anda sudah mempunyai satu, terus ke langkah 2.

Membuat aplikasi mudah, inilah yang anda lakukan:

1. Log masuk ke Facebook, pergi ke halaman Pembangun.
2. Klik "Sediakan aplikasi baharu"butang di sudut kanan atas.
3. Beri nama ke apl baharu anda, bersetuju kepada istilah Facebook, tekan Buat aplikasi.
4. Pergi ke Laman Web tab, isikan URL tapak dan Domain Tapak.
5. Perhatikan nilai nilai ID Permohonan di suatu tempat dan memukul "Simpan Perubahan"butang.

Itu sahaja! Anda boleh kembali kemudian untuk mengisi maklumat yang lain.

Langkah 2. Gantikan Tag

Buka fail header tema anda (header.php) dalam editor kegemaran anda. Sentiasa simpan salinan sandaran sekiranya berlaku sesuatu yang salah.

Cari kod berikut berikut, atau yang bermula dengan >

Gantikan dengan:

Pastikan header.php terbuka, kita akan memerlukannya untuk langkah ke-3.

Langkah 3. Masukkan OG tag

Tampal kod berikut selepas itu tag, atau sebelum tag.

       "/>          

Berikut adalah beberapa nilai yang perlu anda ubah:

• Baris 3: Gantikan your_fb_app_id dengan ID Permohonan dari Langkah 1.
• Baris 4: Anda boleh dapatkan your_fb_admin_id di bawah halaman Facebook Insights anda, (Maklumat lanjut). Klik pada "Insight untuk laman web anda"butang hijau, ambil keseluruhan rentetan kod dan gantikan Talian 4.
• Baris 12: Baris ini menentukan imej yang mewakili pos anda. Jika tema anda menyokong Thumbnail WordPress Post, ia perlu berfungsi dengan baik. Tetapi jika tidak, ia akan gagal dengan anggun tanpa imej. Lihat Langkah 3a untuk penyelesaian alternatif.
• Baris 19: Gantikan logo.jpg dengan url ke logo blog anda. Ia akan dipaparkan apabila halaman bukan pos di blog anda dikongsi di Facebook.

Langkah 3a - Apabila "wp_get_attachment_thumb_url" Fail

Bila wp_get_attachment_thumb_url () gagal berfungsi, anda mungkin pergi ke atribut kandungan tanpa nilai, seperti yang ditunjukkan di bawah:

Satu penyelesaian yang mudah akan menggantikan Line 12 dengan kod berikut:

Seterusnya, buka functions.php dan masukkan kod berikut:

fungsi catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ matches [1] [0]; jika (kosong ($ first_img)) // Menentukan imej lalai $ first_img = "/images/default.jpg";  kembali $ first_img; 

Kod penggantian ini cuba menggunakan panggilan fungsi catch_that_image () untuk merebut dan mengeluarkan URL imej pertama yang ditemui. Gantikan baris 10 dengan URL ke imej lalai jika fungsi gagal untuk mencari imej pertamanya.

Langkah 4. Masukkan Facebook SDK Javascript

Javascript berikut memberi anda akses kepada semua ciri API Graf dan Dialog. Ia juga membolehkan anda mengintegrasikan plugin sosial Facebook seperti butang Seperti, Facepile, Cadangan, dan sebagainya dengan mudah.

Letakkannya header.php, selepas

Gantikan your_fb_app_id dalam Talian 4 dengan ID Permohonan dari Langkah 1 lebih awal.

Langkah 5. Mari kita mengujinya!

Kami selesai mengintegrasikan Grafik Terbuka Facebook ke blog WordPress. Mari kita berikan beberapa ujian untuk memastikan kami telah melakukan perkara dengan betul.

Uji # 1 - Lihat kod sumber

Lihat kod sumber salah satu daripada catatan blog, anda sepatutnya mempunyai sesuatu seperti ini:

Semak ciri-ciri dan nilai-nilainya, pastikan ia betul.

Uji # 2 - Pasang Kotak Suka

Sekiranya anda belum memasang Button Like Facebook, maka mungkin masa untuk mendapatkannya. Letakkan kod berikut di mana-mana (lebih baik sebelum kandungan atau selepas kandungan) di dalamnya single.php:

Seterusnya, dapatkan rakan Suka ia. Anda sepatutnya melihat sesuatu yang serupa muncul dalam profil Facebooknya:

Tambahan: Plugin WordPress

Jika entah bagaimana anda gagal memasang kod atau memerlukan ini dilakukan dengan cepat dan mudah - terdapat plugin WordPress untuk itu.

Facebook Open Graph Meta di WordPress adalah plugin WordPress yang menambah data meta Facebook untuk mengelakkan tidak ada masalah thumbnail, isu tajuk yang salah, isu keterangan yang salah, dll..