Facebook与reactjs共享

问题描述 投票:0回答:1

我正在使用reactjs建立博客。我想为这些文章实现Facebook分享。但是,当我尝试在Facebook帖子中分享文章时,没有文章的描述或图片。我了解问题出在meta标签中。我使用MetaTags npm设置元标记,当我的标题在选项卡标题中更改时,它们似乎可以工作。

<div>
            <head>
                <MetaTags>
                    <title>{this.state.article.title}</title>
                    <meta property="og:type" content="website" />
                    <meta property="og:title" content={this.state.article.title} />
                    <meta property="og:description" content="Футболни статии" />
                    <meta property="og:image" content={this.state.article.mainPhoto} />
                    <meta property="og:image:width" content="400" />
                    <meta property="og:image:height" content="400" />
                </MetaTags>
            </head>
            {body}
            <Footer />
        </div>

有人可以给我替代方法吗?或告诉我他们是怎么做的?非常感谢!

<div
                                    className="fb-share-button"
                                    data-href={'https://thexcoach.com/article/' + this.state.article.slug}
                                    data-layout="button"
                                    data-size="small"
                                >
                                    <a
                                        style={{ textDecoration: 'none', color: '#3b5998' }}
                                        target="_blank"
                                        href={
                                            'https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fthexcoach.com%2Farticle%2F&amp'
                                        }
                                        className=""
                                    >
                                        <FaFacebookSquare style={{ fontSize: '22px', color: '#3b5998' }} /> Сподели
                                    </a>
                                </div>

这是我在组件中的代码。这是index.html

中的代码
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=myAppId&autoLogAppEvents=1"></script>
reactjs facebook share
1个回答
0
投票

我将向您推荐给我们react-helmet库,而不是您在此处使用的react-meta-tags

[react-helmet似乎是这里使用的动态内容的最佳选择。

这里是如何使用它的示例:

<Helmet>
 <title>Your title here</title>
 <meta name="description" content="Dynamic meta description with your {this.state.variable}" />
</Helmet>
© www.soinside.com 2019 - 2024. All rights reserved.