Chèn nút Like và Share Facebook trong WordPress

Cũng giống như cách chèn nút Like và Share Facebook vào website Joomla, bạn cũng có thể thực hiện tương tự để chèn nút Like và Share Facebook vào website WordPress với các bước: tạo và kích hoạt App Facebook » Lấy đoạn mã nhúng  » Dán (paste) đoạn mã nhúng vào vị trí cần hiển thị nút Like và Share. Sau đây, chúng ta sẽ đi chi tiết cách thức thực hiện.

 

I. TẠO APP FACEBOOK VÀ LẤY MÃ FACEBOOK USER ID

I.1.  TẠO APP FACEBOOK CHO WEBSITE

Nếu bạn chưa có App ID, bạn sẽ cần tạo một App Facebook ( » Xem chi tiết bài viết Cách tạo App Facebook đơn giản cho Website). Sau khi tạo và kích hoạt App thành công, mình sẽ có App "firstappdemo" với App ID1607132996198694.

I.2. LẤY FACEBOOK USER ID

Với 1 tài khoản Facebook, sẽ có tương ứng một mã User ID ( » Xem bài viết Hướng dẫn cách xem thông tin mã ID User Facebook). Sau khi hoàn tất các bước, mình đã lấy được mã Facebook User ID từ tài khoản Facebook của mình. Như hình dưới, mã Facebook User ID1574170336170402.

II. LẤY VÀ DÁN ĐOẠN MÃ NHÚNG VÀO WORDPRESS

II.1. LẤY MÃ APP ID VÀ FACEBOOK USER ID

Kết thúc bước 1, bạn đã tạo đăng ký và tạo mới app "firstappdemo" có  App ID = "1607132996198694"  và Facebook User ID = "1574170336170402".

II.2. DÁN (PASTE) ĐOẠN MÃ VÀO TỆP TIN INDEX.PHP

Bạn chọn Appearance » Editor (mục 1). Nhấp chuột vào tệp tin Header (header.php - mục 2). Ở khu vực thẻ <meta>, bạn chèn vào đoạn mã dưới đây vào:

<meta property="fb:app_id" content="1607132996198694" />  /*1607132996198694 là mã App ID mình đã tạo ở Phần I.1 */

<meta property="fb:admins" content="1574170336170402 "/> /*1574170336170402 là mã User ID mình đã tạo ở Phần I.2 */

Nhấn Update File để lưu lại các thay đổi. Chú ý: Bạn cần thay thế trong phần content="..." sử dụng App IDFacebook User ID của bạn.

II.3. LẤY ĐOẠN MÃ NHÚNG NÚT LIKE VÀ SHARE CỦA FACEBOOK

Bạn đi tới địa chỉ: https://developers.facebook.com/docs/plugins/like-button

Bạn nhấp vào Get Code để lấy mã nhúng.

Kết hợp đoạn mã nhúng tính năng Like và Share Facebook ở trên với đoạn mã hiển thị nút Like và Share Facebook trên Website WordPress, ta được đoạn mã:

<!--Đoạn mã nhúng của Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=1607132996198694";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Đoạn mã hiển thị nút Like và Share Facebook trên Website -->

<div class="fb-like" data-href="/<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

Bạn có thể chép đoạn mã trên vào tệp tin cấu hình phần nội dung của giao diện. Trong bài viết này, mình đang sử dụng giao diện Hueman với tệp tin Single Post (single.php) làm tệp tin cấu hình nội dung của giao diện này. Trong trang admin WordPress, bạn chọn Appearance » Editor. Bạn mở tệp tin Single Post (single.php) ra và dán (Paste) đoạn mã ở trên vào vị trí 1 như trong hình:

Chú ý: Trong hình, mình hiển thị nút Like và Share Facebook lên trên mục Các bài viết liên quan ( Related Post) và trên tính năng Comment mặc định của WordPress. Với các giao diện khác, có thể tệp tin cấu hình nội dung của giao diện WordPress không nằm trong tệp tin Single Post (single.php) mà lại nằm trong tệp tin Content.php.

Save

PS: Nếu bạn nào muốn thưởng thức các loại hải sản tươi ngon hết ý cùng giá cả phải chăng, được đánh bắt từ vùng biển Cô Tô, Quan Lạn, Vân Đồn - Quảng Ninh, vui lòng liên hệ với mình nhé. Cảm ơn các bạn đã ủng hộ!

 

                                                HẢI SẢN VÂN ĐỒN 399

                             Chuyên bán buôn, bán lẻ hải sản tươi sống, hải sản khô, hải sản 1 nắng

                                   (Ốc móng tay Cô Tô, Sá sùng Quan Lạn, Mực tươi Cô Tô,...)

                         - Cơ sở 1: Số nhà 399, Lý Anh Tông, Thị trấn Cái Rồng, Vân Đồn, Quảng Ninh
                         - Cơ sở 2: Ngõ 184, Hoàng Quốc Việt, Cầu Giấy, Hà Nội
                         - ĐT: 0985.286.522
                         - Website: http://vandon.com.vn/haisan
                         - Email: [email protected]

                  
                  

 


Ngôn ngữ

Chuyên mục Tùy biến giao diện WordPress

Chuyên mục Thủ thuật WordPress

TÌM KIẾM

Hải sản Vân Đồn