Thêm nút like, share Facebook cho WordPress không cần plugin

Posted on by mtoplistChuyên mục:Top List

Trang chủ » Hướng dẫn thêm nút like và nút share Facebook vào bài viết trong WordPress không cần plugin

Bài viết này sẽ hướng dẫn bạn tạo nút like và nút share của Facebook vào cuối mỗi bài viết trong trang WordPress một cách tự động mà không cần phải tải plugin. Tất cả những gì bạn cần làm là copy paste code.

Trước khi chèn nút like và nút share Facebook vào WordPress thì cần chuẩn bị gì?

Trước khi đọc tiếp bài viết này, bạn cần phải tích hợp Facebook Javascript SDK vào WordPress và tìm hook cho vị trí ở cuối bài viết của theme bạn đang sử dụng.

Các theme phổ biến hiện nay (Astra, GeneratePress, OceanWP, Genesis, …) đều hỗ trợ web designer/developer tích hợp thêm các tính năng khác cho theme bằng hook. Thêm nút like share của Facebook vào bài viết là một ví dụ cho việc sử dụng hook để thêm tính năng cho WordPress.

Ví dụ như bạn đang sử dụng theme GeneratePress, dựa theo trang visual hooks do nhà phát triển của theme GeneratePress cung cấp, hook cho vị trí ở cuối bài viết (single post) là generate_after_content.

generate_after_content hook

Tùy theo mỗi theme mà hook cho vị trí ở cuối bài viết sẽ khác nhau, bạn có thể search Google với mẫu từ khóa “tên theme + visual hooks guide” hoặc “tên theme + single post visual hooks guide” để tìm hiểu thêm.

Sau đây là một số hook của các theme thông dụng cho vị trí ở cuối bài viết:

Bước 1: Tích hợp Facebook Javascript SDK vào WordPress

Đầu tiên, bạn phải tích hợp code Javascript SDK của Facebook vào WordPress trước thì mới có thể thêm nút like và nút share của Facebook vào WordPress được.

Bước 2: Thêm code tạo nút like share của Facebook trong file functions.php của child theme

Bạn copy và paste code dưới đây vào file functions.php của child theme (đọc hướng dẫn tạo child theme tại đây) để tạo nút like share ở cuối bài viết (tìm hook cho vị trí ở cuối bài viết phù hợp với theme bạn đang sử dụng như đã đề cập ở trên).

/* Add Facebook like share button in single blog post */
add_action( 'generate_after_content', 'bss_facebook_social_plugin' );  // thay generate_after_content bằng hook của theme bạn đang sử dụng
function bss_facebook_social_plugin() { ?>
<div class="bss-fb-social">
	<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-width="" data-layout="button_count" data-action="like" data-size="large" data-share="true"></div>
</div>
<?php }

Sau khi thêm code xong, bạn truy cập vào trang blog hoặc một bài viết bất kỳ, bạn sẽ thấy nút like và nút share Facebook đã được tạo thành công.

thêm nút like và nút share của Facebook vào WordPressNút like và nút share của Facebook đã được thêm vào cuối bài viết trong WordPress

Để kiểm tra, bạn có thể like thử bài viết hoặc chia sẻ bài viết trên trang Facebook của mình.

thêm nút like và nút share của Facebook vào WordPressLike bài viếtthêm nút like và nút share của Facebook vào WordPressChia sẻ bài viết

BONUS Bước 2: Chỉ thêm nút like share vào trang bài viết, không thêm vào trang blog archive hoặc các trang khác

Trang 404 cũng có nút thích và chia sẻ?

Nếu bạn chỉ muốn thêm nút like và nút share của Facebook vào cuối trang bài viết nhưng không muốn thêm chúng vào các trang khác như trang blog archive, trang kết quả tìm kiếm, trang 404,… thì hãy bạn thay thế đoạn code ở bước 2 bằng đoạn code sau.

/* Add Facebook like share button in single blog post */
add_action( 'generate_after_content', 'bss_facebook_social_plugin' );  
function bss_facebook_social_plugin() {
	if (is_single() && !is_404()){ ?>
<div class="bss-fb-social">
	<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-width="" data-layout="button_count" data-action="like" data-size="large" data-share="true"></div>
</div>
<?php }
}

Như vậy là bạn đã thêm nút like và nút share của Facebook vào bài viết trong WordPress thành công.

Tiếp theo, bạn có thể:

mtoplist