javascript - 在 LinkedIn/Facebook 上发布元标签以外的自定义内容

Question

我见过很多在LinkedIn/Facebook上分享的解决方案。但在这些解决方案中，共享的内容是静态的，这就是我们在 index.html 文件的 OG 标签中提到的内容。

但是我的页面正在客户端呈现，我想每次用户操作时共享不同的内容。

无论如何，我每次都可以使用 javascript 分享新内容。？

Answer 1

我有同样的问题，我想在Facebook分享链接的引用部分分享用户的分数。不幸的是，2017 年，Meta 弃用了编辑链接帖子附加预览的功能：这里是文章

但是，我找到了一个解决方法，虽然不是很漂亮。我在我的项目中使用 Next.JS 和 next-share，但您可能可以使用其他框架实现相同的效果：

我使用想要共享的数据作为参数创建了一个动态路由，并用它来为元标记 og:description 制作内容字符串。然后我将动态路由的 url 用于共享按钮，这样 facebook 爬虫就会读取动态描述。不过，您不能使用重定向，我必须制作某种带有按钮的登录页面，将用户重定向到所需的页面。这是代码：

虚拟页面：

// /[phrase]/page.jsx
import FacebookLandingPage from '../../components/FacebookLandingPage.jsx'

export default function Phrase({ params }) {
    const gameData = params.phrase.split("%2C");
    const difficulty = gameData[1];
    let minutes;
    let seconds;
    let attempts;
    
    if (gameData[0] == "crack-the-code" 
        && parseInt(gameData[2]) 
        && parseInt(gameData[2]) < 10) {
        attempts = gameData[2]
    } else if (gameData[0] == "sudoku" 
        && parseInt(gameData[2]) 
        && parseInt(gameData[3])) {
        minutes = gameData[2]
        seconds = gameData[3];
    }
    
    const img = params.phrase.match("sudoku") ? "sudoku" : params.phrase.match("crack-the-code") ? "crack-the-code" : "";
    const sudokuPhrase = `I completed a${difficulty == "Easy" || difficulty == "Expert" ? "n" : ""} ${difficulty} Sudoku in ${minutes} minute${minutes != 1 ? "s" : ""} and ${seconds} second${seconds != 1 ? "s" : ""}! Can you do better?`;
    const ctcPhrase = `I cracked a${difficulty == "Easy" || difficulty == "Expert" ? "n" : ""} ${difficulty} code in ${difficulty == "Easy" ? 7 - attempts : difficulty == "Medium" ? 8 - attempts : difficulty == "Hard" ? 9 - attempts : 10 - attempts} attempts! Can you do better?`;
    const sharePhrase = gameData[0] == "crack-the-code" ? ctcPhrase : gameData[0] == "sudoku" ? sudokuPhrase : "";
    
    return (
        <>
            <meta 
                property='og:image' 
                content={`https://puzzle-challenge.vercel.app/images/${img}.png`}
                />
            <meta 
                property='og:description' 
                content={sharePhrase}
            />
            <FacebookLandingPage/>
        </>
    )
}

然后，在游戏页面：

<FacebookShareButton 
    url={`https://puzzle-challenge.vercel.app/sudoku,${difficulty},${minutes},${seconds}`}
    hashtag={'#sudoku'}
>
    <FacebookIcon size={32} round className='my-1'/>
</FacebookShareButton>