Cách thêm các nút chia sẻ xã hội vào ứng dụng React của bạn

Phương tiện truyền thông xã hội đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta và là một nền tảng tuyệt vời để các doanh nghiệp tiếp cận với khách hàng của họ. Thêm các nút chia sẻ xã hội vào ứng dụng React của bạn có thể giúp bạn tăng phạm vi tiếp cận và khả năng hiển thị trên các nền tảng truyền thông xã hội. Trong bài viết này, bạn sẽ tìm hiểu cách có thể dễ dàng thêm các nút chia sẻ lên mạng xã hội trong ứng dụng React của mình.

Thêm các nút chia sẻ xã hội vào ứng dụng React của bạn

Trước khi bắt đầu, bạn cần có hiểu biết cơ bản về React và cách thiết lập ứng dụng React. Bạn cũng nên có một tài khoản trên (các) nền tảng truyền thông xã hội mà bạn muốn thêm các nút chia sẻ.

Cài đặt Mô-đun chia sẻ phản ứng

Có một số tùy chọn có sẵn để thêm các nút chia sẻ xã hội vào ứng dụng React của bạn. Một lựa chọn là sử dụng phản ứng chia sẻ module, một thư viện nhẹ và dễ sử dụng để thêm các nút chia sẻ xã hội vào ứng dụng của bạn. Để cài đặt phản ứng chia sẻ mô-đun, bạn cần chạy lệnh sau:

 npm install react-share 

Tạo nút Chia sẻ lên Facebook

Một khi bạn có phản ứng chia sẻ mô-đun được cài đặt, bạn có thể bắt đầu thêm các nút chia sẻ xã hội vào ứng dụng của mình. Để làm điều này, bạn sẽ cần nhập các thành phần cần thiết từ phản ứng chia sẻ mô-đun. Ví dụ: để thêm nút chia sẻ lên Facebook, bạn cần sử dụng đoạn mã sau:

 import { FacebookShareButton } from 'react-share'; 

Sau đó, bạn có thể sử dụng FacebookChia sẻNút thành phần trong mã của bạn để thêm nút chia sẻ lên Facebook vào ứng dụng của bạn.

 import React from 'react';
import { FacebookShareButton, FacebookIcon } from 'react-share';
const App = () => {
  return (
    <div>
      <FacebookShareButton
        url={'https://www.example.com'}
        quote={'Dummy text!'}
        hashtag="#muo"
      >
        <FacebookIcon size={32} round />
      </FacebookShareButton>
    </div>
  );
};
export default App; 

Dưới đây là đầu ra hiển thị nút chia sẻ lên Facebook:

Trong mã này, trước tiên bạn phải nhập các thành phần được yêu cầu từ phản ứng chia sẻ mô-đun. Sau đó, tạo một thành phần chức năng gọi là Ứng dụng có chứa nút chia sẻ Facebook. Các FacebookChia sẻNút thành phần được sử dụng để tạo nút chia sẻ và FacebookBiểu Tượng thành phần được sử dụng để hiển thị logo Facebook trên nút.

Các FacebookChia sẻNút thành phần có một số đạo cụ có thể được sử dụng để tùy chỉnh nút chia sẻ. Trong ví dụ này, chúng tôi đã chỉ định url, trích dẫnvà dấu thăng đạo cụ.

Cuối cùng, bạn cần xuất Ứng dụng thành phần, để nó có thể được sử dụng ở những nơi khác trong ứng dụng của chúng tôi. Khi nhấp vào nút chia sẻ lên Facebook, nó sẽ mở hộp thoại chia sẻ được điền sẵn với nội dung được chỉ định url, trích dẫnvà dấu thăng.

Tạo các nút chia sẻ xã hội cho các nền tảng truyền thông xã hội khác

Ngoài Facebook, phản ứng chia sẻ mô-đun cũng cung cấp các thành phần để thêm các nút chia sẻ xã hội cho một số nền tảng khác, bao gồm Instagram, Twitter, LinkedIn, v.v.

Để thêm nút chia sẻ xã hội cho một nền tảng khác, bạn cần nhập các thành phần bắt buộc từ phản ứng chia sẻ mô-đun. Ví dụ: để thêm nút chia sẻ Twitter, trước tiên bạn cần nhập thông tin sau:

 import { TwitterShareButton, TwitterIcon } from 'react-share'; 

Sau đó, bạn có thể sử dụng TwitterChia sẻNút và TwitterBiểu Tượng các thành phần trong mã của bạn để thêm nút chia sẻ lên Twitter vào ứng dụng của bạn.

 <TwitterShareButton
  url={'https://www.example.com'}
  quote={'Dummy text!'}
  hashtag="#muo"
>
  <TwitterIcon size={32} round />
</TwitterShareButton> 

Dưới đây là đầu ra hiển thị các nút chia sẻ lên Facebook và chia sẻ lên Twitter:

Khi bạn nhấp vào nút chia sẻ Twitter, hộp thoại chia sẻ được điền sẵn với URL và trích dẫn được chỉ định sẽ mở ra.

Tùy chỉnh các nút

Các thành phần nút chia sẻ xã hội có một số đạo cụ mà bạn có thể sử dụng để tùy chỉnh nút. Một số đạo cụ có sẵn bao gồm:

• url: URL được chia sẻ trên Facebook
• trích dẫn: trích dẫn được chia sẻ trên Facebook
• dấu thăng: thẻ bắt đầu bằng # sẽ được thêm vào bài đăng được chia sẻ trên Facebook

Bạn có thể tìm thấy danh sách đầy đủ các nút và đạo cụ chia sẻ xã hội có sẵn trong tài liệu chính thức về chia sẻ phản ứng.

Nhận được nhiều lượt xem trang hơn với các nút chia sẻ trên mạng xã hội

Thêm các nút chia sẻ xã hội vào ứng dụng React của bạn có thể giúp bạn tăng phạm vi tiếp cận và khả năng hiển thị trên các nền tảng truyền thông xã hội. Bằng cách giúp người dùng dễ dàng chia sẻ nội dung của bạn, bạn có khả năng tiếp cận đối tượng lớn hơn và thu hút nhiều lưu lượng truy cập hơn đến ứng dụng của mình. Ngoài ra, các nút chia sẻ trên mạng xã hội cũng có thể giúp tăng uy tín và quyền hạn cho thương hiệu của bạn, vì các lượt chia sẻ có thể đóng vai trò là đề xuất cho ứng dụng của bạn.