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:

Answer 1

Try to install the react-twitter-embed by doing npm install react-twitter-embed. Once installed, the usage is pretty simple. Take a look at the screenshot below.

Code Sample:

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;

They also have a list of other components that you can use as well.

List of available components

• TwitterShareButton
• TwitterFollowButton
• TwitterHashtagButton
• TwitterMentionButton
• TwitterTweetEmbed
• TwitterMomentShare
• TwitterDMButton
• TwitterVideoEmbed
• TwitterOnAirButton

Here is a link to the npm package https://www.npmjs.com/package/react-twitter-embed

Answer 2

There are few interesting solutions out there, but all of those are injecting twitters code to website.

What would I suggest is to create another empty html file just for this widget. Eg. /twitter.html, where you can place all dirty JavaScripts and render widget.

Then when you include:

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

It will work without any issues. Plus, you have separated external scripts - so it's good for security.

Just add some styling to make it look fine:

twitter.html

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

React's iframe

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

Answer 3

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

Answer 4

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 5

IMHO you should split it down in two. A part of your code could be somehow rendered in a React component

/**
 * @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');

Your script tag could be placed, as a separate React component or as normal HTML just above the closing body tag.

Answer 6

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