Как интегрировать виджет Twitter в Reactjs?

Question

Как интегрировать виджет Twitter в Reactjs?

Я хочу добавить виджет Twitter в React, но я не знаю, с чего начать и как это сделать. Я очень новичок в React JS.

Вот HTML-версия кода:

<div class="Twitter">
  <a class="twitter-timeline" href="https://twitter.com/<%= @artist.twitter %>" data-widget-id="424584924285239296" data-screen-name='<%= @artist.twitter %>'>Tweets by @<%= @artist.twitter %></a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

И вот что у меня так далеко:

React.DOM.div
  className: 'Twitter'
  children: [
    React.DOM.a
      className: 'twitter-timeline'
      href: "https://twitter.com/" + artist.twitter
      'data-widget-id': "424584924285239296" 
      'data-screen-name': artist.twitter
      children: 'Tweets by ' + artist.twitter
    React.DOM.script
      children: ...
  ]

Я планировал добавить скрипт, где точки (...), но это не работает. Спасибо за помощь.

22

reactjs twitter widget

Источник

user3851171 10 авг '14 в 23:45

10 ответов

Другие вопросы по тегам reactjs twitter widget

user1553014 27 окт '15 в 20:13 2015-10-27 20:13 · Answer 1 · 2015-10-27 20:13

Сначала загрузите Widget JS в ваш index.html(перед вашими скриптами React). Затем в вашем компоненте просто сделайте следующее. Виджет JS будет повторно сканировать DOM.

componentDidMount: function() {
  twttr.widgets.load()
}

Смотрите: https://dev.twitter.com/web/javascript/initialization

21

Источник

user1553014 27 окт '15 в 20:13

user3846507 27 дек '15 в 19:31 2015-12-27 19:31 · Answer 2 · 2015-12-27 19:31

Это работает для меня!

Обратите внимание, что я использую React v0.14 и ECMAScript 2015 (также известный как ES6) с Babel.

index.html (после тега body):

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],  t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s); js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  t._e = []; t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));
</script>

Компонент Twitter:

const Twitter = () => (
  <a href="https://twitter.com/your-twitter-page"
    className="twitter-follow-button"
    data-show-count="false"
    data-show-screen-name="false"
  >
  </a>
);

Некоторые React Component (который использует кнопку Twitter):

class SomeReactComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Twitter />
      </div>
    );
  }
}

Или, если вы хотите иметь настраиваемую кнопку, вы можете просто сделать это:

const Twitter = () => (
  <a href="https://twitter.com/intent/tweet?via=twitterdev">
    <i className="zmdi zmdi-twitter zmdi-hc-2x"></i>
  </a>
);

user490153 17 апр '16 в 18:17 2016-04-17 18:17 · Answer 3 · 2016-04-17 18:17

Кажется, гораздо проще использовать Twitter widgets.jsболее конкретно createTimeline.

class TwitterTimeline extends Component {
  componentDidMount() {
    twttr.ready(() => {
      twttr.widgets.createTimeline(widgetId, this.refs.container)
    })
  }

  render() {
    return <div ref="container" />   
  }
}

Вы можете загрузить библиотеку прямо из https://platform.twitter.com/widgets.js, но они рекомендуют следующий фрагмент:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

Более подробная информация о настройке библиотеки находится здесь.

user4262568 17 ноя '14 в 19:04 2014-11-17 19:04 · Answer 4 · 2014-11-17 19:04

Это просто, все, что вам нужно, просто использовать React's componentDidMount крюк

{createClass, DOM:{a}} = require "react"

@TwitterWidget = createClass
  componentDidMount: ->
    link = do @refs.link.getDOMNode
    unless @initialized
      @initialized = yes
      js = document.createElement "script"
      js.id = "twitter-wjs"
      js.src = "//platform.twitter.com/widgets.js"
      link.parentNode.appendChild js

  render: ->
    {title, content, widget} = @props
    a
      ref: "link"
      className: "twitter-timeline"
      href: "https://twitter.com/#{widget.path}"
      "data-widget-id": widget.id,
      widget.title

TwitterWidget
  widget:
    id: "your-widget-id"
    title: "Your Twitts"
    path: "widget/path"

user7259986 18 янв '20 в 10:02 2020-01-18 10:02 · Answer 5 · 2020-01-18 10:02

Попробуйте установить response-twitter-embed, выполнивnpm install react-twitter-embed. После установки пользоваться довольно просто. Взгляните на скриншот ниже.

Пример кода:

import React from 'react';

import { TwitterTimelineEmbed } from 'react-twitter-embed';

const TwitterTimeLine = () => {

  return (
    <TwitterTimelineEmbed
      sourceType="profile"
      screenName="accimeesterlin" // change to your username
      options={{height: 1200}}
    />
  );
}

export default TwitterTimeLine;

У них также есть список других компонентов, которые вы также можете использовать.

Список доступных компонентов

TwitterShareButton
TwitterFollowButton
TwitterHashtagButton
TwitterMentionButton
TwitterTweetEmbed
Twitter МоментПоделиться
TwitterDMButton
TwitterVideoEmbed
TwitterOnAirButton

Вот ссылка на пакет npm https://www.npmjs.com/package/react-twitter-embed

user2206316 14 ноя '16 в 03:13 2016-11-14 03:13 · Answer 6 · 2016-11-14 03:13

Вы можете использовать этот React Social Embed Component.

^{Отказ от ответственности: это компонент, созданный мной.}

Установить с помощью: npm i react-social-embed,

Использование:

import TweetEmbed from 'react-social-embed'

<TweetEmbed id='789107094247051264' />
/>

2

Источник

user2206316 14 ноя '16 в 03:13

user992594 07 янв '16 в 14:09 2016-01-07 14:09 · Answer 7 · 2016-01-07 14:09

class TwitterShareButton extends React.Component {
      render() {
        return <a href="https://twitter.com/share" className="twitter-share-button">Tweet</a>
      }

      componentDidMount() {
        // scriptタグが埋め込まれた後にTwitterのaタグが置かれても機能が有効にならないので、すでにscriptタグが存在する場合は消す。
        var scriptNode = document.getElementById('twitter-wjs')
        if (scriptNode) {
          scriptNode.parentNode.removeChild(scriptNode)
        }

        // ボタン機能の初期化（オフィシャルのボタン生成ページで生成されるものと同じもの）
        !function(d,s,id){
          var js,
              fjs=d.getElementsByTagName(s)[0],
              p=/^http:/.test(d.location)?'http':'https';
          if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;
            js.src=p+'://platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js,fjs);
          }
        }(document, 'script', 'twitter-wjs');
      }

http://qiita.com/h_demon/items/95e638666f6bd479b47b

user2801810 12 авг '14 в 21:20 2014-08-12 21:20 · Answer 8 · 2014-08-12 21:20

ИМХО, ты должен разделить его на две части. Часть вашего кода может быть каким-то образом визуализирована в компоненте React

/**
 * @jsx React.DOM
 */
var React = require('react');
var twitterWidget = React.createClass({
    render: function () {
        return (
            <div class="Twitter">
                <a class="twitter-timeline" 
                   href={this.props.link} 
                   data-widget-id={this.props.widgetId} 
                   data-screen-name={this.props.screenName} > 

                   Tweets by {this.props.screenName}
                </a>
            </div>
        );
    }
});
React.renderComponent(<twitterWidget link="..." widgetId="..." />, document.getElementById('containerId');

Ваш тег сценария может быть размещен как отдельный компонент React или как обычный HTML прямо над закрывающим тегом тела.

user1571491 18 фев '18 в 09:02 2018-02-18 09:02 · Answer 9 · 2018-02-18 09:02

Есть несколько интересных решений, но все они вводят код твитеров на сайт.

Что бы я предложил, это создать еще один пустой HTML-файл только для этого виджета. Например. /twitter.htmlгде вы можете разместить все грязные скрипты Java и визуализировать виджет.

Тогда, когда вы включаете:

<iframe src="/twitter.html" />

Это будет работать без проблем. Кроме того, вы разделили внешние скрипты - так что это хорошо для безопасности.

Просто добавьте немного стиля, чтобы он выглядел хорошо:

twitter.html

html,
body {
  margin: 0;
  padding: 0;
}

Реагировать на iframe

iframe {
  border: none;
  height: ???px;
}

user9004368 26 окт '21 в 08:41 2021-10-26 08:41 · Answer 10 · 2021-10-26 08:41

Я точно знаю, в чем проблема, для начала нужно понять, как работает React. React - это интерфейсный фреймворк, работает так, как будто вся DOM обрабатывается с помощью реакции, если мы напрямую интегрируемся с DOM, тогда иногда очень сложно кодировать, потому что React также обновляет эту DOM.

Согласно документации Twitter, мы не можем добавлять twitter.js после инициализации веб-страницы. https://dev.twitter.com/web/javascript/initialization

так что лучше использовать какой-нибудь пакет, response-twitter-embed

Простой шаг

      npm install --save react-twitter-embed

      import { TwitterTimelineEmbed } from 'react-twitter-embed';
<TwitterTimelineEmbed 
    sourceType="profile" 
    userId={"1029587508445630465"} 
    options={{height: 400}} 
/>

Вы можете проверить интеграцию, отличную от временной шкалы, также с помощью package.

https://romik-mk.medium.com/embed-twitter-timeline-widgets-reactjs-a27cafd7cfb6