How to integrate the Twitter widget into Reactjs?

Question

I want to add the Twitter widget into React, but I don't know where to start or how to do it. I am very new to React JS.

Here is the HTML version of the code:

<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>

And here is what I have so far:

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: ...
  ]

I was planning to add the script where the dots (...) are, but that doesn't work. Thank you for your help.

Answer 1

First load Widget JS in your index.html(before your React scripts). Then in your component, simply do the following. The widget JS will rescan the DOM.

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

See: https://dev.twitter.com/web/javascript/initialization

Answer 2

This works for me!

Please note that I use React v0.14 and ECMAScript 2015 (aka ES6) with Babel.

index.html (after body tag):

<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 component:

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

Some React Component (that uses Twitter button):

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

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

Or if you want to have a customized button, you can simply do this:

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

Answer 3

You can use this React Social Embed Component.

^{Disclaimer: It is a component created by me.}

Install by: npm i react-social-embed.

Usage:

import TweetEmbed from 'react-social-embed'

<TweetEmbed id='789107094247051264' />
/>

Answer 4

It's easy, all you need just use React's componentDidMount hook

{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"

Answer 5

It seems to be much easier to just use Twitter's widgets.js, more specifically createTimeline.

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

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

You can load the library directly from https://platform.twitter.com/widgets.js, but they recommend the following snippet:

<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>

More information on setting up the library is here.

Answer 6

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