发布日期: 2024-04-14

内嵌社媒方案

方案一：采用各个社区提供的sdk进行渲染

对于内嵌 YouTube、TikTok、Facebook 和 Instagram 等社交媒体内容，通常需要使用它们各自的 SDK 或 API 来获取媒体内容，并在网页中进行展示。

Demo实现

YouTube、TikTok、Facebook、Instagram案例简单Demo实现

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Embedded Social Media Content</title>
    </head>
    <body>
    <ul>
        <li>
        <div>
            <div>youtube 案例</div>
            <div id="youtube-player"></div>
        </div>
        </li>
        <li>
        <div>
            <div>tiktok 案例</div>
            <blockquote
            class="tiktok-embed"
            cite="https://www.tiktok.com/@zachking/video/6749520869598481669"
            data-video-id="6749520869598481669"
            data-embed-from="oembed"
            style="max-width: 605px; min-width: 325px"
            >
            <section>
                <a target="_blank" title="@zachking" href="https://www.tiktok.com/@zachking?refer=embed">@zachking</a>
                <p>
                Do you see the glass as half full or half empty??
                <a title="perspective" target="_blank" href="https://www.tiktok.com/tag/perspective?refer=embed"
                    >#perspective</a
                >
                <a title="magic" target="_blank" href="https://www.tiktok.com/tag/magic?refer=embed">#magic</a>
                </p>
                <a
                target="_blank"
                title="♬ Glass Half Full Zach King - Zach King"
                href="https://www.tiktok.com/music/Glass-Half-Full-Zach-King-6749517306881248005?refer=embed"
                >♬ Glass Half Full Zach King - Zach King</a
                >
            </section>
            </blockquote>
        </div>
        </li>
        <li>
        <div>facebook 案例</div>
        <!-- 内容不一样 类名不一样 例如帖子使用post； 相册使用album等 -->
        <div class="fb-post" data-href="https://www.facebook.com/facebook/posts/575327262637013"></div>
        </li>
        <li>
        <div>instagram 案例</div>
        <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/C5aS3CbrsYe/"></blockquote>
        </li>
    </ul>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
        function onYouTubeIframeAPIReady() {
        const player = new YT.Player('youtube-player', {
            height: '360',
            width: '640',
            videoId: 'rGmoljGmKPI',
        });
        }
    </script>
    <script async src="https://www.tiktok.com/embed.js"></script>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0"></script>
    <script async src="https://www.instagram.com/static/bundles/metro/EmbedSDK.js/33cd2c5d5d59.js"></script>
    </body>
</html>

高效

解决列表需要渲染多种相同类型的社媒内容 → 封装sdk，sdk层去处理创建实例
部分社媒内容和绑定的类名不一样导致，如何简易化 → 中间层处理不同类型社媒，渲染参数

针对上述问题，查询业界是否有提供的具体方案。

tiktok： react-tiktok-embed

import React from 'react';
import TikTokEmbed from 'react-tiktok-embed';

function MyComponent() {
    return (
    <div>
        <TikTokEmbed url="https://www.tiktok.com/@username/video/1234567890" />
    </div>
    );
}

export default MyComponent;

youtube: react-youtube

import React from 'react';
import YouTube from 'react-youtube';

function MyComponent() {
    const videoId = 'VIDEO_ID_HERE'; // 替换为你的 YouTube 视频 ID

    return (
    <div>
        <YouTube videoId={videoId} />
    </div>
    );
}

export default MyComponent;

facebook和instagram没有专门的react社区库

方案二

react-social-media-embed

在 React 中轻松嵌入来自多个流行社交媒体平台的内容。

所有嵌入只需要帖子的 URL。不需要 API 令牌。

目前支持：Facebook、Instagram、LinkedIn、Pinterest、TikTok、X (Twitter) 和 YouTube。

GitHub - justinmahar/react-social-media-embed: 📰 Easily embed social media posts from Facebook, Instagram, LinkedIn, Pinterest, TikTok, X (Twitter), and YouTube in React.

npm: react-social-media-embed

具体展示案例：

@storybook/cli - Storybook

稳定性：

Demo效果

vite + react + ~~ts简易实现~~
步骤

npm install -g vite
npm install -g create-vite
npm init @vitejs/app my-react-app –template react-ts
npm i react-social-media-embed
引入案例

import { FacebookEmbed, InstagramEmbed, TikTokEmbed, YouTubeEmbed } from 'react-social-media-embed';
<div style={{ display: 'flex', justifyContent: 'center' }}>
    <YouTubeEmbed url="https://www.youtube.com/watch?v=HpVOs5imUN0" width={325} height={220} />
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
    <FacebookEmbed url="https://www.facebook.com/andrewismusic/posts/451971596293956" width={328} />
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
    <InstagramEmbed url="https://www.instagram.com/p/C5aS3CbrsYe/" width={328} />
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
    <TikTokEmbed url="https://www.tiktok.com/@epicgardening/video/7055411162212633903" width={325} />
</div>

内嵌功能交互体现

内嵌社媒内容，官方提供的案例中带有播放、点赞、评论等交互功能性按钮，开发前我们需要了解其功能具体体现是什么？主要有下面两点：