分享按钮不包含内容

Question

我正在尝试创建一个共享按钮栏，但它们都不起作用：

Whatsapp：共享文本和链接，但链接不会显示为蓝色，也不会预览。我关心链接是否可点击。

Facebook 和 Twitter：没有任何建议。邮箱已打开，但没有预先写好任何内容。

Twitter：获得大量 %20 的明文分享。

我尝试过使用

addtoany

和不使用它，但失败了。

如何正确创建简单的分享按钮？

import React from 'react';
import { FaFacebook, FaTwitter, FaLinkedin, FaWhatsapp } from 'react-icons/fa';

const ShareButtons = () => {
    const urlToShare = encodeURIComponent(window.location.href);
    const textToShare = encodeURIComponent("Some Text");

    const iconSize = 25;

    const shareOnFacebook = () => {
        const fbUrl = `https://www.addtoany.com/add_to/facebook?linkurl=${urlToShare}&linkname=${textToShare}`;
        window.open(fbUrl, '_blank');
    };

    const shareOnTwitter = () => {
        const twitterUrl = `https://twitter.com/share?url=${encodeURIComponent(urlToShare)}&text=${encodeURIComponent(textToShare)}`;
        window.open(twitterUrl, '_blank');
    };

    const shareOnLinkedIn = () => {
        const linkedInUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(urlToShare)}&title=${encodeURIComponent(textToShare)}`;
        window.open(linkedInUrl, '_blank');
    };

    const shareOnWhatsApp = () => {
        const whatsappUrl = `https://www.addtoany.com/add_to/whatsapp?linkurl=${urlToShare}&linkname=${textToShare}`;
        window.open(whatsappUrl, '_blank');
    };

    return (
        <div className="shareButtons">
            <button onClick={shareOnFacebook}>
                <FaFacebook size={iconSize} />
            </button>
            <button onClick={shareOnTwitter}>
                <FaTwitter size={iconSize} />
            </button>
            <button onClick={shareOnLinkedIn}>
                <FaLinkedin size={iconSize} />
            </button>
            <button onClick={shareOnWhatsApp}>
                <FaWhatsapp size={iconSize} />
            </button>
        </div>
    );
};

export default ShareButtons;

Answer 1

因此，您在使用 LinkedIn 共享 API 时遇到了一些问题，但主要问题是链接必须可在网络上访问，并且不要对 Twitter 的文本进行编码

"use client";

import React from "react";
import { FaFacebook, FaTwitter, FaLinkedin, FaWhatsapp } from "react-icons/fa";

const ShareButtons = () => {
  const currentUrl = encodeURIComponent("https://www.google.com");
  const message = encodeURIComponent("Check out this content!");

  const iconSize = 25;

  const shareOnFacebook = () => {
    const fbUrl = `https://www.facebook.com/sharer/sharer.php?u=${currentUrl}`;
    window.open(fbUrl, "_blank", "noopener,noreferrer");
  };

  const shareOnTwitter = () => {
    const twitterUrl = `https://twitter.com/intent/tweet?url=${currentUrl}&text=${message}`;
    window.open(twitterUrl, "_blank", "noopener,noreferrer");
  };

  const shareOnLinkedIn = () => {
    const linkedInUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${currentUrl}&title=${message}&summary=${message}&source=${encodeURIComponent(
      "YourWebsiteName"
    )}`;
    window.open(linkedInUrl, "_blank", "noopener,noreferrer");
  };

  const shareOnWhatsApp = () => {
    const whatsappUrl = `https://wa.me/?text=${message}%20${currentUrl}`;
    window.open(whatsappUrl, "_blank", "noopener,noreferrer");
  };

  return (
    <div className="share-buttons">
      <button onClick={shareOnFacebook} aria-label="Share on Facebook">
        <FaFacebook size={iconSize} />
      </button>
      <button onClick={shareOnTwitter} aria-label="Share on Twitter">
        <FaTwitter size={iconSize} />
      </button>
      <button onClick={shareOnLinkedIn} aria-label="Share on LinkedIn">
        <FaLinkedin size={iconSize} />
      </button>
      <button onClick={shareOnWhatsApp} aria-label="Share on WhatsApp">
        <FaWhatsapp size={iconSize} />
      </button>
    </div>
  );
};

export default ShareButtons;