Facebook поделиться с reactjs - PullRequest
Новая
       8

Facebook поделиться с reactjs

0 голосов
/ 25 апреля 2020

Я создаю блог с reactjs. Я хочу реализовать Facebook долю для статей. Однако, когда я пытаюсь поделиться статьей в посте на фейсбуке, нет описания или изображения статьи. Я понимаю, что проблема в метатегах. Я использую метатеги 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>

Это мой код в компоненте. И это код в индексе. 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>

1 Ответ

1 голос
/ 25 апреля 2020

Я бы порекомендовал вам реагирующий шлем библиотека вместо react-meta-tags, которую вы здесь используете.

Кажется, что react-helmet является лучшим для использования с динамическим c контентом, который у вас есть.

Вот пример того, как его можно использовать: 

<Helmet>
 <title>Your title here</title>
 <meta name="description" content="Dynamic meta description with your {this.state.variable}" />
</Helmet>
...