Thêm nút like, share, google + vào WordPress

Bài viết thêm nút like, share, google + vào Wordpress một cách chi tiết, bạn sẽ không cần phải sử dụng đến plugin nữa

Thêm nút like, share, google + vào WordPress
4.6 (91.11%) 9 votes
Thêm nút like, share, google + vào WordPress

Chào các bạn,
Mới đây mình có nhận được vài yêu cầu hỗ trợ thêm nút Like, Share Facebook hay google + vào website và bài viết ở Website WordPress. Trên mạng cũng có nhiều bài rồi nhưng hầu như là dùng Plugin và chưa được chi tiết cho lắm. Vậy nên quyết định viết 1 bài giúp các bạn có thể tự làm việc này mà không cần sử dụng đến các plugin nữa.

them-chia-se-mang-xa-hoi-wp-6
Thêm nút like, share, google + vào WordPress

– Thêm Nút Like, Share của Facebook vào Website WordPress:
Bước 1: Các bạn vào trang :
Like Button for Web – Facebook

Bước 2: Tìm đến phần Like Button Configurator
them-chia-se-mang-xa-hoi-wp

Ở box tạo code trên các bạn có các tùy chọn như :

  • URL to Like: Địa chỉ Link để Like
  • Width: chiều rộng của khung Like, Share
  • Layout: ở đây bạn sẽ có 4 tùy chọn để xem hiển thị nút like và share của mình
  • Action Type: Bạn có 2 tùy chọn hiển thị nút Like hoặc nút Giới thiệu
  • Show Friends’ Faces: Check vào nếu bạn muốn hiển thị bạn bè đã thích trang
  • Include Share Button: Check vào nếu bạn muốn hiển thị cả nút Share

Sau khi đã thiết lập xong kiểu hiển thị mà bạn muốn hãy ấn vào nút Get Code

them-chia-se-mang-xa-hoi-wp-2

Bước 3: Thêm code vào Website WordPress
Trong phần Get Code để hiển thị Nút Like, Share Facebook bạn có 2 phần :
— Phần Javascript : đây là thư viện cần có để sử dụng các chức năng Social của Facebook (Like Website ,Share Website ,Comment Box, Like Box, …). Bạn hãy copy phần này vào đầu hoặc cuối trang web đều được. Mình thì hay để ở cuối trang, phía trên của thẻ đóng </body>

<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&appId=561973880635651";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

— Phần code hiển thị nút Like và Share

<div class="fb-like" data-href="https://wordpress.vnkings.com/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>

Đây chính là đoạn code hiển thị ra nút like và share Facebook. ở wordpress thì bạn có thể đặt ở trang chủ, trang chi tiết hay bất kỳ trang nào bạn muốn bằng cách thay địa chỉ của data-href
— Đặt Nút Like, Share vào trang chủ WordPress:(thêm vào file index.php)

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

— Đặt Nút Like vào trang chi tiết bài viết:(thêm vào file single.php)

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

– Thêm nút Google+ vào Website WordPress

Bước 1: Các bạn vào trang:
+1 Button – Google

Bước 2: Cấu hình nút +1 theo ý muốn của bạn

them-chia-se-mang-xa-hoi-wp-3

  • Kích thước: ở đây bạn có thể chọn kích thước nút G+ To nhỏ tùy ý
  • Chú thích: Hiển thị chú thích hoặc chỉ hiển thị nút G+
  • Ngôn ngữ: Hiển thị ngôn ngữ chú thích mà bạn muốn sử dụng
  • URL để +1: Địa chỉ để +1

Bước 3: Thêm code vào Website WordPress
Cũng giống như Facebook, ở Google cũng có 2 phần:
— Phần Javascript: thư viện để dùng các ứng dụng cho Google
Bạn hãy copy phần này vào đầu hoặc cuối trang web đều được. Mình thì hay để ở cuối trang, phía trên của thẻ đóng </body>

<!-- Đặ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>

— Phần code hiển thị nút Google+

<!-- Đặt thẻ này vào nơi bạn muốn Nút +1 kết xuất. -->
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="https://wordpress.vnkings.com/"></div>

— Đặt Nút Google+ vào trang chủ:(thêm vào file index.php)

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php bloginfo('url');?>"></div>

— Đặt Nút Google+ vào trang chi tiết bài viết:(thêm vào file single.php)

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php the_permalink() ;?>"></div>

– Tổng kết lại: Để các bạn không bị rối thì các bạn có thể sử dụng nguyên đoạn code bên dưới để hiển thị nút Like, Share, Google trong Website của mình:

– Copy đoạn Script của google và Facebook vào footer.php phía trên của thẻ đóng

<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&appId=561973880635651";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'vi'}
</script>

– Hiển thị trên trang chủ:

<div class="fb-like" data-href="<?php bloginfo('url');?>" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php bloginfo('url');?>"></div>

– Hiển thị trên trang chi tiết bài viết:

<div class="fb-like" data-href="<?php the_permalink() ;?>" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php the_permalink() ;?>"></div>

Thử xem demo Bên Vnkings.com nhé:

them-chia-se-mang-xa-hoi-wp-5

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

Bài liên quan

  1. Cảm ơn bạn vì bài viết. Cho mình hỏi 1 chút ạ, mình muốn chèn nút like bằng nick wordpress (chứ k phải facebook) thì phải làm thế nào ạ? Trên các blog wordpress free thì nó mặc định rồi mà qua web riêng mình k biết phải chỉnh ở đâu :((

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?