Tweets-loader.js

Tweets-loader.js is a JavaScript library that loads tweets of Twitter Publish.

CAUTION: Due to the declaration of Twitter, Tweets-loader.js is no longer support for widget ID. Instead, Tweets-loader.js now supports for embeded contents of Tweet Publish.

Demo

Twitter Cards

Append publish code encoded with encodeURIComponent(...) as query string to the URL: https://lf2com.github.io/tweets-loader.js/demo/cards.html

• Collection
• List
• Tweet
• Moment
• Likes Timeline

Install

Git

git clone https://github.com/lf2com/tweets-loader.js.git
cd tweets-loader.js
npm install .

Build

Build ./tweets-loader.min.js

npm run build

Debug Build

npm run build-debug

Browser

Download from this repository or use your own built: tweets-loader.min.js

<!-- include script -->
<script src="PATH/TO/tweets-loader.min.js"></script>

<script>
  console.log(window.TweetsLoader); // here it is
</script>

Usage of Tweets Loader

Parse Tweets

Parse tweets by assigning one of the following sources:

• DOM element of tweet
• DOM element containing tweets
• Code generated with Twitter Publish

TweetsLoader(source)

DOM element of tweet

The same as TweetsLoader.parseTweet(DOM)

let tweets = TweetsLoader(singleTweetDom); // input a single DOM of tweet
console.log(tweets); // get array of tweets (length: 1)

DOM element containing tweets

NOTICE: Remember to escape special chars such as / in the code

The same as TweetsLoader.parseTweets(DOM)

let tweets = TweetsLoader(embededDom); // input embeded DOM
console.log(tweets); // get array of tweets

Code generated with Twitter Publish

The same as [TweetsLoader.parseCode]

let collection = `<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"><\/script>`; // code generated with twitter publish

TweetsLoader(collection) // input HTML text
  .then((tweets) => {
  console.log(tweets); // get array of tweets
  });

TweetsLoader.parseTweet(DOM)

Parse a single tweet of HTML element

let tweet = TweetsLoader.parseTweet(singleTweetDom); // input a single DOM of tweet
console.log(tweet); // get a tweet

TweetsLoader.parseTweets(DOM)

Parse multiple tweets of HTML element

let tweets = TweetsLoader.parseTweets(embededDom); // input embeded DOM
console.log(tweets); // get array of tweets

TweetsLoader.parsePublish(code)

Parse tweets from the code generated with Twitter Publish

let moment = `<a class="twitter-moment" href="https://twitter.com/i/moments/625792726546558977?ref_src=twsrc%5Etfw">Michelle Obama Opens Special Olympics</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"><\/script>`; // code generated with twitter publish

TweetsLoader(moment) // input HTML text
  .then((tweets) => {
  console.log(tweets); // get array of tweets
  });

Object Properties

Tweet Object

Property	Type	Description	Default
id	String	Id of tweet	null
url	String	URL of tweet	null
author	Object	User object
reply	Object	Tweet object of response target	null
medias	Array	Array of media object contained in the tweet	[]
like	Object	Like object
date	Date	Date of tweet	null
mentions	Array	Array of mention object	[]
hashtags	Array	Array of hashtag obejct	[]
urls	Array	Array of url object	[]
share	Array	Array of share object	[]
text	Object	Text object

User Object

Property	Type	Description	Default
account	String	Screen name of user	null
name	String	Display name of user	null
url	String	URL of user	null
avatar	Array	Array of avatar object	[]
verified	Boolean	Verification of user	false

Avatar Object

Avatar of user

Property	Type	Description
type	String	1x for normal size; 2x for large side
url	String	URL of avatar

Media Object

Media object must might be any of the belows:

Image Media Object

Property	Type	Description
type	String	Always be image
name	String	Title of image
image	Object	See the image object below

Image Object

Property	Type	Description
width	Integer	Width of image
height	Integer	Height of image
ref	String	Raw image URL
url	String	Thumbnail of image

Video Media Object

Property	Type	Description
type	String	Always be video
name	String	Title of video
image	Object	See the image object below

Image Object

Property	Type	Description
ref	String	Raw image URL
url	String	Thumbnail of image

URL Media Object

Property	Type	Description
type	String	Always be url
name	String	Title of URL
description	String	Description of URL. null if no info
domain	String	Domain of URL
image	Object	See the image object below

Image Object

Property	Type	Description
url	String	Thumbnail of image

Tweet Media Object

The same as tweet object

Like Object

Property	Type	Description	Default
url	String	URL to like	null
count	Integer	Count of likes	null if no info

Mention Object

Property	Type	Description
id	String	Id of mention user
url	String	URL of mention user
account	String	Screen name of user
display	String	@account

Hashtag Obejct

Property	Type	Description
url	String	URL of mention user
name	String	Name of hash tag
display	String	#hashtag

URL Object

Property	Type	Description
url	String	URL converted by twitter
raw	String	Raw URL
display	String	URL without protocol such as https://

Share Object

Property	Type	Description
type	String	One of twitter, facebook, linkedin, or tumblr
url	String	URL to share

Text Object

Property	Type	Description
html	String	HTML code of text
text	String	Text of display without hidden elements such as https:// of URLs
raw	String	Full pure text
split	Array	Text classify by pure text and special element with property type of: (url, mention, or hashtag )

License

MIT Copyright @ Wan Wan