How to integrate Facebook Open Graph with WordPress / WordPress

The Facebook Open Graph protocol allows you to share your blog content not only with your readers but also their Facebook friends. The best part is – whenever someone liked your content(s), it will be published on their Facebook profile. But that’s not all, Open Graph allows you to discover more interesting ways to interact and engage your readers. In the end – if this is done right – it will build your brand and increase your website traffic.

In today’s post, we will look at How to integrate Facebook Open Graph with self-hosted WordPress in a detailed step-by-step guide. It will require editing your existing WordPress Theme and creating a Facebook app (if you don’t have one).

Ready? Fire up your favorite browser and code editor. Full instructions after the jump.

Step 1. Create a facebook app

We will need a App ID and for that you will need to create a Facebook App. If you already have, skip to step 2.

Creating an app is easy, here’s what you do:

1. Log in to Facebook, go to the Developer’s page.
2. Click “Set up a new app“The button in the upper right corner.
3. Give a name into your new app, agree go to Facebook, press Create apps.
4. Go Website tab, fill in website URL and Website domain name.
5. Record the value of App ID somewhere and press “Save changesknot “.

That is all! You can always come back later to fill in the rest of the information.

Step 2. Replace the Label

Open your theme’s header file (header.php) in your favorite editor. Always keep a backup just in case anything goes wrong.

Find the following line of code or the line starting with >

Replaced by:

 
Keep the title open, we'll need it for step 3.
 
Step 3. Insert OG  card
 
Paste the following code right after  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 () doesn't work, you're likely going to pass a null content attribute, like what's shown below:
A simple workaround would be to replace Line 12 with the following code:
Next, open Functions.php and insert the following code:
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; 
This alternative code tries to use a function call Catch_that_image () to get and output the URL of the first image it encounters.  Replace line 10 with the URL to a default image if the function doesn't find its first image.
Step 4. Insert Facebook Javascript SDK
The following javascript allows you to access all the features of the Graph and Dialog APIs.  It also allows you to integrate Facebook social plugins like Like button, Facepile, Recommended, etc.
Put it in title.phpimmediately after 
 
Instead of, replace your_fb_app_id in line 4 with App ID from Step 1 earlier.
Step 5. Check it out!
We have completed the integration of Facebook Open Graph into a WordPress blog.  Let's experiment a bit to make sure we've done everything right.
Test #1 - View the source code
Take a look at the source code of one of the blog posts, you should have something like this:
 
Check the properties and its values, make sure they are correct.
Quiz #2 - Install Like Box
If you don't have the Facebook Like Button installed, it might be time to get one.  Place the following code anywhere (preferably before content or after content) inside menu.php:
Next, have a friend to Like You will see something similar appear in his Facebook profile:
 
Add: WordPress Plugin
If somehow you can't install the code or need to do it quickly and easily - there is a WordPress plugin for that.
Facebook Open Graph Meta in WordPress is a WordPress plugin that adds Facebook meta data to avoid no thumbnail problems, wrong title issues, wrong description issues, etc.