Cách tích hợp đồ thị mở Facebook với WordPress

Giao thức Facebook Open Graph cho phép bạn chia sẻ nội dung blog của mình không chỉ với độc giả mà cả bạn bè trên Facebook của họ. Phần tốt nhất là - bất cứ khi nào ai đó đã thích (các) nội dung của bạn, nó sẽ được công bố trên hồ sơ Facebook của họ. Nhưng đó chưa phải là tất cả, Open Graph cho phép bạn khám phá những cách thú vị hơn để tương tác và thu hút người đọc. Cuối cùng - nếu điều này được thực hiện đúng - nó sẽ xây dựng thương hiệu của bạn và tăng lưu lượng truy cập trang web của bạn.

Trong bài viết hôm nay, chúng ta sẽ xem xét Cách tích hợp Facebook Open Graph với WordPress tự lưu trữ trong một hướng dẫn chi tiết từng bước. Nó sẽ yêu cầu chỉnh sửa Chủ đề WordPress hiện có của bạn và tạo một ứng dụng Facebook (nếu bạn không có).

Sẳn sàng? Hãy kích hoạt trình duyệt và trình soạn thảo mã yêu thích của bạn. Hướng dẫn đầy đủ sau khi nhảy.

Bước 1. Tạo một ứng dụng facebook

Chúng tôi sẽ cần một ID ứng dụng và để có được điều đó, bạn sẽ cần tạo Ứng dụng Facebook. Nếu bạn đã có, hãy chuyển sang bước 2.

Tạo một ứng dụng rất dễ dàng, đây là những gì bạn làm:

1. Đăng nhập vào Facebook, truy cập trang của Nhà phát triển.
2. Nhấp chuột "Thiết lập một ứng dụng mới"Nút ở góc trên bên phải.
3. Đưa một cái tên vào ứng dụng mới của bạn, đồng ý vào Facebook, nhấn Tạo ứng dụng.
4. Đi đến Trang mạng tab, điền vào URL trang web và Tên miền trang web.
5. Ghi lại giá trị của ID ứng dụng ở đâu đó và nhấn "Lưu thay đổinút ".

Đó là tất cả! Bạn luôn có thể quay lại sau để điền vào phần còn lại của thông tin.

Bước 2. Thay thế Nhãn

Mở tệp tiêu đề của chủ đề của bạn (tiêu đề.php) trong trình soạn thảo yêu thích của bạn. Luôn luôn giữ một bản sao lưu chỉ trong trường hợp có bất cứ điều gì sai.

Tìm dòng mã sau đây hoặc dòng bắt đầu bằng >

Thay thế bằng:

Giữ tiêu đề mở, chúng tôi sẽ cần nó cho bước thứ 3.

Bước 3. Chèn OG thẻ

Dán đoạn mã sau ngay sau thẻ hoặc trước nhãn.

       "/>          

Dưới đây là một số giá trị bạn sẽ cần thay đổi:

• Dòng 3: Thay thế your_fb_app_id với ID ứng dụng từ Bước 1.
• Dòng 4: Bạn có thể nhận được your_fb_admin_id trong trang Thông tin chi tiết Facebook của bạn, (Thông tin thêm). Nhấp vào "Thông tin chi tiết cho trang web của bạn"nút màu xanh lá cây, lấy toàn bộ chuỗi mã và thay thế Dòng 4.
• Dòng 12: Dòng này xác định hình ảnh đại diện cho bài viết của bạn. Nếu chủ đề của bạn hỗ trợ WordPress Post Thumbnails, nó sẽ hoạt động tốt. Nhưng nếu không, nó sẽ thất bại một cách duyên dáng nếu không có hình ảnh. Kiểm tra Bước 3a để có cách giải quyết khác.
• Dòng 19: Thay thế logo.jpg với một url đến logo của blog của bạn. Nó sẽ được hiển thị khi một trang không đăng bài trên blog của bạn được chia sẻ trên Facebook.

Bước 3a - Khi "wp_get_attachment_thumb_url" Không thành công

Khi nào wp_get_attachment_thumb_url () không hoạt động, có khả năng bạn sẽ chuyển đến một thuộc tính nội dung không có giá trị, như những gì được hiển thị bên dưới:

Một cách giải quyết đơn giản sẽ là thay thế Dòng 12 bằng mã sau:

Tiếp theo, mở ra Hàm.php và chèn đoạn mã sau:

hàm Catch_that_image () toàn cầu $ bài đăng, $ bài đăng; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ khớp); $ first_img = $ khớp [1] [0]; if (trống ($ first_img)) // Xác định hình ảnh mặc định $ first_img = "/images/default.jpg";  trả lại $ first_img; 

Mã thay thế này cố gắng sử dụng một cuộc gọi chức năng Catch_that_image () để lấy và xuất URL của hình ảnh đầu tiên mà nó bắt gặp. Thay thế dòng 10 bằng URL thành một hình ảnh mặc định nếu chức năng không tìm thấy hình ảnh đầu tiên của nó.

Bước 4. Chèn SDK Facebook Javascript

Javascript sau đây cho phép bạn truy cập tất cả các tính năng của API đồ thị và Hộp thoại. Nó cũng cho phép bạn tích hợp các plugin xã hội Facebook như nút Like, Facepile, Khuyến nghị, v.v..

Đặt nó vào tiêu đề.php, ngay sau khi

Thay thế your_fb_app_id trong dòng 4 với ID ứng dụng từ Bước 1 trước đó.

Bước 5. Hãy kiểm tra nó!

Chúng tôi đã hoàn thành việc tích hợp Facebook Open Graph vào blog WordPress. Hãy thử nghiệm một chút để đảm bảo chúng tôi đã thực hiện đúng mọi thứ.

Bài kiểm tra số 1 - Xem mã nguồn

Hãy xem mã nguồn của một trong những bài đăng trên blog, bạn sẽ có một cái gì đó như thế này:

Kiểm tra các thuộc tính và giá trị của nó, đảm bảo chúng đúng.

Bài kiểm tra số 2 - Cài đặt hộp Like

Nếu bạn chưa cài đặt Nút Like trên Facebook, thì có lẽ đã đến lúc lấy một nút. Đặt mã sau vào bất cứ đâu (tốt nhất là trước nội dung hoặc sau nội dung) bên trong đơn.php:

Tiếp theo, có một người bạn để Như nó Bạn sẽ thấy một cái gì đó tương tự xuất hiện trong hồ sơ Facebook của anh ấy:

Thêm: Plugin WordPress

Nếu bằng cách nào đó bạn không thể cài đặt mã hoặc cần thực hiện nhanh chóng và dễ dàng - có một plugin WordPress cho điều đó.

Facebook Open Graph Meta trong WordPress là một plugin WordPress bổ sung dữ liệu meta Facebook để tránh không có vấn đề về hình thu nhỏ, vấn đề tiêu đề sai, vấn đề mô tả sai, v.v..