React.js Twitter API to Embed Profile and Posts Media on Website Using react-twitter-embed Library in Javascript Full Tutorial For Beginners

React.js Twitter API to Embed Profile and Posts Media on Website Using react-twitter-embed Library in Javascript Full Tutorial For Beginners

 

Welcome folks today in this post we will be embeding twitter media,posts and profile on website using react-twitter-embed Library in React.js and Javascript. All the source code of the application is given below.

 

 

 

Installation

 

 

 

In order to proceed we need to install the following library into our react.js project as shown below with the help of npm command

 

npm i react-twitter-embed

 

After installing this library you can use this inside your application

 

 

 

Embeding Twitter Timeline

 

 

 

First of all we will see how to see how to embed twitter profile timeline on website using this library. First of all we need to import the required libraries inside our react.js project like this as shown below

 

 

import { TwitterTimelineEmbed, TwitterShareButton, TwitterFollowButton, TwitterHashtagButton, TwitterMentionButton, TwitterTweetEmbed, TwitterMomentShare, TwitterDMButton, TwitterVideoEmbed, TwitterOnAirButton } from 'react-twitter-embed';

 

 

After importing this libraries you just need to replace your twitter username in the below snippet of code to get the twitter timeline of that particular twitter account

 

<TwitterTimelineEmbed
  sourceType="profile"
  screenName="saurabhnemade"
  options={{height: 400}}
/>

 

 

Full Source Code

 

Now we will look at the full source code of the example.

 

Make a index.tsx file and copy paste the following code

 

index.tsx

 

 

import React from 'react'
import ReactDOM from 'react-dom'
import { TwitterTimelineEmbed, TwitterShareButton, TwitterFollowButton, TwitterHashtagButton, TwitterMentionButton, TwitterTweetEmbed, TwitterMomentShare, TwitterDMButton, TwitterVideoEmbed, TwitterOnAirButton } from 'react-twitter-embed';


const App = () => {
  return (
    <div className="App">
       <TwitterTimelineEmbed
  sourceType="profile"
  screenName="saurabhnemade"
  options={{height: 400}}
/>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

 

See also  React.js Hooks Random Password Generator and Manager UI with Icons in Browser Using Vanilla Javascript Full Project For Beginners

 

If you run this react.js app you will see the following result as shown below

 

 

 

 

 

Embeding Particular Tweet Media

 

 

 

Now you can also embed particular twitter tweet media as shown below

 

 

<TwitterTweetEmbed
  tweetId={'933354946111705097'}
/>

 

 

 

 

 

Adding Twitter Share Button on Website

 

 

You can also add twitter share button on the website using this below code

 

 

<TwitterShareButton
    url={'https://facebook.com/saurabhnemade'}
    options={{ text: '#reactjs is awesome', via: 'saurabhnemade' }}
  />

 

 

 

 

 

Adding Twitter Mention Button on Website

 

 

You can also add twitter mention button on the website using this code

 

 

<TwitterMentionButton
    screenName={'saurabhnemade'}
  />

 

 

 

 

 

Add Twitter HashTag Button on Website

 

 

You can also add twitter hashtag button on the website using this code

 

 

<TwitterHashtagButton
    tag={'cybersecurity'}
  />

 

 

 

 

Add Twitter Follow Button on Website

 

 

You can also add twitter follow button on website using this code

 

 

<TwitterFollowButton
    screenName={'saurabhnemade'}
  />

 

 

 

See also  React.js Image Upload Preview Animation and Validation Component Using react-images-upload Full Tutorial 2020

 

 

Add Twitter Moment Share Button on Website

 

 

You can also add twitter moment share button on the website using this code

 

 

<TwitterMomentShare
    momentId={'650667182356082688'}
  />

 

 

 

 

 

Add Twitter Direct Messaging Button on Website

 

 

You can also add twitter direct messaging button on the website using this code

 

 

<TwitterDMButton
    id={1364031673}
  />

 

 

 

 

Add Twitter Video to Website

 

 

You can also any twitter video media on the website using this code

 

<TwitterVideoEmbed
    id={'560070183650213889'}
  />

 

 

 

Add Twitter on Air Button

 

 

You can also add Twitter on Air Button on the website using this code

 

 

<TwitterOnAirButton
    id={'560070183650213889'}
  />

 

 

Leave a Reply