Hôm nay, ICTsharing hướng dẫn cách tạo nút chia sẻ bài viết lên facebook cho website sử dụng CMS Joomla và WordPress hoặc code thuần.
Có website đẹp và chuyên nghiệp mà không có sự tương tác và chia sẻ cho nhiều người thì thật là một thiếu xót trong SEO.
Từng bước thực hiện như sau:
Bước 1. Tạo một fanpage trên facebook
Mình đã tạo fanpage của ICTsharing có Url: https://www.facebook.com/ICTsharing.me/
Nếu các bạn đã có fanpage rồi thì bỏ qua bước này nhé, nếu chưa có thì hãy tạo cho mình một fanpage bằng cách nhấn vào link sau: https://www.facebook.com/pages/creation/
Bạn xem mình thuộc nhóm nào thì nhấn Bắt đầu nhóm đó nhé, cái này cũng không quan trọng lắm sau này bạn chọn lại được.
Nhấn Tiếp tục
Tới bước này các bạn có thể nhấn bỏ qua hoặc nếu có ảnh đại diện chọn vào Tải lên ảnh đại diện
Các bước tiếp theo rất đơn giản các bạn chỉ cần tải ảnh đại diện với ảnh bìa nếu có là ok. Hoặc chọn Bỏ để hoàn thành việc tạo fabpage.
Sau khi tạo xong fanpage bạn vào phần giới thiệu để tạo Url thân thiện như của mình là https://www.facebook.com/ICTsharing.me
Phần tạo Link thân thiện của mình là ICTsharing.me do có rất nhiều người đã sử dụng nên để chọn một tên thân thiện bạn cần phải chọn lọc rất nhiều.
Mình muốn chỉ đặt là ICTsharing hoặc ictsharing.com nhưng đã bị người khác đặt trước đó rồi. Nên mình cho thêm đuôi .me vào.
Trong mục giới thiệu này bạn hãy bổ sung thêm các thông tin khác vào cho đủ thông tin nhé.
Như vậy là bạn đã tạo được fanpage rồi: https://www.facebook.com/ICTsharing.me
Bước 2. Tạo NÚT share facebook
Các bạn vào link sau: https://developers.facebook.com/docs/plugins/share-button?locale=vi_VN
Copy link fanpage vừa tạo vào ô 1 như hình trên
Sau đó nhấn Lấy mã
Sau khi lấy đoạn mã trên nhúng vào web CMS Joomla hoặc CMS WordPress hoặc trên website tự code.
Bước 3. Nhúng code nút chia sẻ facebook cho website
1. Đối với website bạn tự code điền code như ví dụ facebook hướng dẫn như sau:
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
Trong đó:
https://www.your-domain.com/your-page.html: là domain và link bài viết bạn muốn chia sẻ
2. Nhúng code chia sẻ facebook cho web sử dụng CMS Joomla
Đối với các bạn sử dụng template mặc định chỉ cần copy đoạn code sau vào phía cuối của file templatesprotostarhtmlcom_contentarticledefault.php của thẻ
<article class="item-page<?php echo $this->pageclass_sfx?>">
Chú ý: đoạn code sau để lấy Url của bài viết trong joomla khi được chia sẻ lên facebook
data-href="<?php $currenturl = JURI::current(); echo $currenturl; ?>"
Sau đó lưu lại file và xem thành quả nhé!
Nếu không thành công đừng ngại hỏi lại mình phía dưới comment nhé!
3. Nhúng code chia sẻ facebook cho web sử dụng CMS WordPress
Đối với mã nguồn CMS WordPress thì cực kỳ đơn giản, bạn tìm file header.php trong thư mục theme đang sử dụng.
Copy đoạn code sau vào trong cặp thẻ <head> </head>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v4.0&appId=468460226911316&autoLogAppEvents=1"></script>
<meta property="og:url" />
<meta property="og:type" content="article"/>
<meta property="og:title" />
<meta property="og:description"/>
<meta property="og:image"/>
Tìm file single.php trong theme và copy đoạn code sau xuống cuối
<div class="fb-like" data-href="<?php echo get_the_permalink(); ?>" data-width="" data-layout="standard" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
Như hình sau:
Sau đó ra xem thành quả nhé!
Kết luận:
Bài viết hướng dẫn cách tích hợp nút share facebook cho nội dung của bài viết trên website. Bạn là người tò mò muốn tìm hiểu về code thì đây là cách bạn có thể tối ưu website một cách tối đa. Nếu bạn không thích làm theo các này, bạn có thể tìm kiếm các plugin hỗ trợ rất nhiều cho CMS Joomla hoặc WordPress. Đối với các bạn làm code web thuần thì đơn giản rồi.
Cuối cùng nếu có bất cứ câu hỏi nào xin vui lòng comment phía dưới bài viết này nhé!
Bạn có thể theo dõi kênh facebook của ICTsharing tại đây