button-like-g-wordpress-2

ONPAGE WP 16: Chèn Nút Like Button Facebook, G+ cho toàn trang WordPress

Một thủ thuật không còn mới đối với đại đa số các SEOER, tuy nhiên. Với tầm quan trọng của 1 hộp chứa Botton Like Facebook và G+ (Google Plus) đóng vai trò rất quan trọng trong việc tăng Trust kéo tương tác từ mạng xã hội. Vậy nên đây là một trong những kiến thức không thể thiếu cho 1 SEOER. Chính vì vậy, hôm nay mình sẽ đề cập cho các bạn thêm một chủ đề Hướng dẫn chèn Nút Like Button Facebook và G+ (Google Plus) cho toàn trang Wordress một cách hoàn toàn tự động!.

button-like-g-wordpress-1

Để thực hiện Chèn Nút Like Button Facebook, G+ cho toàn trang WordPress, Các bạn cần phải liên kết với một mã Script do nhà cung cấp đề xuất. Với Facebook bạn sẽ có 1 đoạn mã riêng. Và Google Plus (G+) cũng sẽ có một đoạn mã riêng!.

1. Hướng dẫn chèn Nút Like Button Facebook toàn trang cho WordPress

developers là trang chia sẻ khá nhiều tiện ích của Facebook. Trong đó Nút Like Button là một trong số đó. Để chèn Nút Like Button Facebook vào wordpress, đầu tiên các bạn truy cập vào trang developers của Facebook với đường dẫn dưới đây:

https://developers.facebook.com/docs/plugins/like-button?locale=vi_VN

Tiếp theo, Bạn kéo xuống phần thiết lập Like Box cho Nút Like Button mà mình sẽ chèn vào Website của bạn. Ở đây có khá nhiều chức năng mà bạn có thể tùy biến.

button-like-g-wordpress-2

  • URL to Like: Đường dẫn cần đặt Button Like
  • Width: Độ rộng của Button Like
  • Layout: Giao diện (có 2 màu đen – Trắng)
  • Show Friends Faces: Hiển thị danh sách bạn bè đã like trang này
  • Include Share Button: Hiển thị thêm nút Share.

Tiếp theo, Bạn nhấp vào GET CODE để lấy mã code tương ứng cho Nút Like Button của Facebook tương thích theo URL mà bạn đã khai báo!. Tại đây, Nút Like Button của bạn sẽ chỉ hoạt động được trên URL mà các bạn đã khai báo. Để hoạt động được toàn trang bạn cần một đoạn mã code tự động Get giá trị Permalink của Page (Hướng dẫn ở cuối bài này).

Sau khi bấm vào GET CODE, 1 hộp thoại sẽ được hiển thị với 2 dòng code. Dòng trên chứa thông tin của Mã Script. Bạn coppy mã Script này dàn vào phần Header (Trước thẻ đóng </head>) của Website.

<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/vi_VN/sdk.js#xfbml=1&version=v2.5″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Đoạn code bên dưới là phần cho hiển thị Like Button của Facebook. Bạn sao chép đoạn Code này về chèn vào vị trí mà bạn muốn cho nó hiển thị.

<div class=”fb-like” data-href=”http://seocam.edu.vn/” data-layout=”standard” data-action=”like” data-show-faces=”true” data-share=”true”></div>

Như đã nói ở trên, Để Nút Like Button tự động Get Permalink (đường dẫn). Nghĩa là ở mỗi Page khác nhau trong website nó sẽ tự động lấy URL là URL của chính Page đó 1 cách tự động. Chúng ta cần thêm 1 đoạn code để Get đường dẫn vào Auto cho nó như sau:

<?php
global $wp;
$current_url = home_url(add_query_arg(array(),$wp->request));
?>

Sau đó bạn gắn giá trị URL vào phần URL cố định bôi màu đỏ ở trên, cụ thể là:

<div class=”fb-like” data-href=”<?php echo $current_url; ?>” data-layout=”box_count” data-action=”like” data-show-faces=”true” data-share=”true”></div>

Như vậy là chúng ta đã Auto hóa đường dẫn tương ứng với nhiều Page khác nhau toàn trang trên WordPress cho Like Button Facebook rồi đấy!.

2. Hướng dẫn Chèn Nút G+ Button cho toàn trang WordPress

Cũng giống như Facebook. Để tạo một Button G+ (Google Plus) cho website WordPress bạn cần truy cập vào trang developers của Google với đường dẫn dưới đây:

https://developers.google.com/+/web/+1button/

Tiếp theo, bạn tiến hành cấu hình hiển thị cho Button G+ (Google Plus) theo ý muốn. Với Google thì tất cả đều là tiếng việt nó dễ sử dụng hơn.

button-like-g-wordpress-4

Ok!. Bây giờ bạn coppy mã Script dán vào trước thẻ đóng </head> của Website (Làm tương tự như của Facebook).

<!– Đặt thẻ này vào phần đầu hoặc ngay trước thẻ đóng phần nội dung của bạn. –>
<script src=”https://apis.google.com/js/platform.js” async defer>
{lang: ‘vi’}
</script>

Và phần code bên dưới bạn dán vào vị trí trên website mà bạn muốn cho nó hiển thị. Thông thường chúng ta sẽ dán 2 Nút Like Button và Button G+ vào cùng 1 vị trí gần nhau!.

<!– Đặt thẻ này vào nơi bạn muốn Nút +1 kết xuất. –>
<div class=”g-plusone” data-annotation=”inline” data-width=”300″ data-href=”http://seocam.edu.vn“></div>

Dĩ nhiên, Button G+ của chúng ta vẫn đang ở chế độ tĩnh và đi Page nào thì nó cũng chỉ hiển thị với 1 URL cố định đã khai báo ở trên. Việc của chúng ta bây giờ là lại gọi hàm Get Permalink cho nó:

<div class=”g-plusone” data-size=”tall” data-annotation=”none” data-href=”<?php echo $current_url; ?>“></div>

Ok. Vậy là chúng ta lại có thêm 1 Button G+ Auto Get Link cho từng Page khác nhau trên toàn Site WordPress. Và dưới đây là toàn bộ đoạn Code mà mình đang sử dụng để chèn Nút Like Button Facebook, Button G+ (Google Plus) lên toàn trang wordpress:

<!– Start Button Social —!>

<?php
global $wp;
$current_url = home_url(add_query_arg(array(),$wp->request));
?>

<div class=”g-plusone” data-size=”tall” data-annotation=”none” data-href=”<?php echo $current_url; ?>”></div><br />

<div class=”fb-like” data-href=”<?php echo $current_url; ?>” data-layout=”box_count” data-action=”like” data-show-faces=”true” data-share=”true”></div>

<!– End Button Social —!>

Chúc các bạn thành công!.


ho quang hien
Tác giả là người ham học hỏi - Thích chia sẻ với những gì mình có!. Vui lòng tôn trọng bản quyền của Hiển Quang Hồ nhé các bạn!. Nếu Coppy vui lòng đặt Links nguồn bài viết và tên tác giả. Nếu không DMCA sẽ làm việc với các bạn!.
Kết bạn chia sẻ & học hỏi qua Facebook của Hiển Nhé!. Mọi ý kiến góp ý, Thắc mắc, Liên hệ vui lòng gửi về địa chỉ Email: hienquangho@gmail.com!.

One thought on “ONPAGE WP 16: Chèn Nút Like Button Facebook, G+ cho toàn trang WordPress

  1. Như đã nói ở trên, Để Nút Like Button tự động Get Permalink (đường dẫn). Nghĩa là ở mỗi Page khác nhau trong website nó sẽ tự động lấy URL là URL của chính Page đó 1 cách tự động. Chúng ta cần thêm 1 đoạn code để Get đường dẫn vào Auto cho nó như sau:

    request));
    ?>
    Đoạn này chèn ở đâu vậy bác? mong chỉ giáo

Comments are closed.