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
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.
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
Ở 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útGiớ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
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
- 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
Mình sẽ quay lại để gửi 1 bài viết từ blog của mình về chủ đề này nhằm bổ sung cho cho đầy đủ, chúng ta giao lưu nhé!
Ok, Vnkings rất vui được giao lưu cùng bạn!
Rất hay, cảm ơn admin đã chia sẻ. Tuy mới phát triển nhưng chia sẻ những điều rất hữu ích. Chúc site thành công
Cảm ơn bạn nhiều nhé!
Em có thể trao đổi liên kết với website của bác được không ạ. Hihi Nếu được em cảm ơn bác nhiều ạ
Chèn vào có làm giảm tốc độ tải trang không Admin?
Có bạn ạ, vì phải load js của Fb và Google mà, bạn dùng Plugin nó cũng chèn như vậy.
bài viết hay cám ơn bạn
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ạn có demo web nào không?
cảm ơn bạn, đúng bài viết mình cần
mình thuê làm web trên nền tảng wordpress, nhưng giờ chuyển từ http sang https thì một số trang con nó hiện cái khiêng và có dấu nhân (báo là đang cố gắng tải tập lệnh từ nguồn không được xác thực) nghĩa là sao nhỉ. ko tìm được file code nào để xem cái like face để xóa bỏ
Bạn ctrl + U rồi tìm với từ khóa là domain bạn, sau đó thấy link nào là http thì tìm thẻ div bao quanh đoạn link đó ở theme bằng notepad++ cho nhanh bạn ạ.
Bạn cho mình xin theme web của bạn được không ạ? 🙁