jasonmayes / twitter-post-fetcher

Fetch your twitter posts without using the new Twitter 1.1 API. Pure JavaScript! By Jason Mayes

Twitter-Post-Fetcher

Allows you to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API

Further information and project page: http://jasonmayes.com/projects/twitterApi/

Latest version: 18.0.4 - ensure you are using the latest version to avoid issues!

Why does this exist?

Recently I was quite frustrated to find out that the old API on Twitter was depreciated and the overhead in setting up a system to perform OAUTH just to get my already publicly available tweets was too damn high (see https://dev.twitter.com/discussions/11564).

Even worse I couldn't find any simple solutions for JavaScript. All code examples were server side. So after much thinking I invented the following solution. It makes use of the over bloated widgets Twitter gives us to put on our sites, cuts out all the nonsense (and non semantic markup), and returns to you your raw tweet text so you can do with it as you please and style it how you want on your own website - like it should be. Instructions on how to get it working with your tweets are in the code comments, just do what it says! Enjoy!

Browser support

All popular browsers supported. Chrome, Firefox, Safari, Opera, Internet Explorer 7, 8 and 9.

Examples

Please read comments in JavaScript for examples on how to use and how to generate a widget id to use with the component - it is really easy! Here are some examples on CodePen:

• Regular usage: http://codepen.io/jasonmayes/pen/Ioype
• 3D Twitter Cube: http://codepen.io/jasonmayes/pen/rDyqj

Key changes / features

• UPDATE 1: First version released!
• UPDATE 2: Due to popular demand, you can now specify how many tweets you want returned which can be any number between 1 and 20, as the third parameter to the function call :-) Let me know if you have any other requests below.
• UPDATE 3: Due to even more requests, solution now gets recent tweets for user, favourite tweets, list tweets, or hashtag search
• UPDATE 4: Script now handles writing HTML to an element with an ID of your choice making it even simpler to use and allows you to queue up many requests so you can have many items on the same page doing different things eg one might show recent posts with a specific hashtag, whilst the other shows your latest 5 tweets.
• UPDATE 5: Script now supports grabbing who posted the tweet, their profile photo, and link to profile. Also adds the time they posted at the end. All customizable with CSS to look how you want.
• UPDATE 6: You can now specify a custom date formatting function to format the twitter post date however you wish! See comments for how to use.
• UPDATE 7: Now supports IE 7, 8 and 9, Firefox, Chrome, Safari and Opera.
• UPDATE 8: You can now not show retweets via a new parameter in function call. See comments in code.
• UPDATE 9: Now supports a custom function callback when data is ready allowing you to have full control over its output.
• UPDATE 10: Now supports Replying / Retweeting / Favouriting.
• UPDATE 11: Now includes option to render a tweet's image.
• UPDATE 13: CommonJS (e.g. Browserify) and AMD (e.g. Require.js) are now supported. See the new examples at the bottom of exampleUsage.js

Got suggestions? Feedback? Feature requests? Tell me!

At time of writing I have made over 132 changes, and many are the result of feature requests from people like you! I want to help all the developers out there get tweets on their sites once again - with ease, as it should be. Talk to me: Via Google+, twitter, or my website.

Disclaimer

This is by no means an official solution - it is something I created to solve a problem I had, and has now grown in to a full component. Twitter may change its system in such a way to cause this to stop working. I of course will try my best to adapt to any changes and all future versions of this code shall be posted here, on this site. I suggest you check back regularly for any updates. This is however the only solution I know of to date to get public data from Twitter without using the new 1.1 API which otherwise requires OAUTH tokens with every request and is a lot harder to set up. Lets keep it simple!

Feel free to use in your own projects. I only ask you keep any disclaimers with my code (even if code is modified / minified) so others can find the original source should they wish to get updates or support. A link back / social media shout out is always appreciated to help others discover it but not required :-)

With that out of the way, I hope you enjoy this component, and that it makes your life a bit easier. Jason Mayes

Notes

If you need IE8 support - ensure you do not set a non block level element as the target to render into. Use a DIV or similar instead. See http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85).aspx This is due to browser, not Twitter Fetcher.

Buy me a beer

It takes time to maintain the component and respond to all your requests. If this has saved you time, or maybe even a client, then some beer money is always appreciated :-) Hit the link on the right of this page: http://jasonmayes.com/projects/twitterApi/

twitter-post-fetcher's Issues

Bower Package ist out of date

There is still the verstion 13.1,
The minified js has there a diferent version than the not minified (13.0).

Add ability to load additional pages in a timeline

Would it be possible to add the ability to load the next page of tweets in a timeline.

It looks like the following endpoint ignores the max_id parameter;

https://cdn.syndication.twimg.com/widgets/timelines/...

However, after adding paged to the path it returns the correct results (only if a max_id is provided);

https://cdn.syndication.twimg.com/widgets/timelines/paged/ ... &max_id=614070890763014146

Crosswalk android Build

Hey i`mtrying to use the fetcher to build a webapp but i have a problema. When i export the proyect to android crosswalk (via intel xdk) the twitter fetch doesnt work at all but when i use it in my localhost it works just fine. is this a compatibility issue?

media images have an undefined source

@jasonmayes

First off, I want to thank you for creating and maintaining Twitter-Post-Fetcher. It is a great tool and I really appreciate it.

With the recent Twitter changes, I was curious to know if anyone has encountered img elements being displayed with undefined src, with "showImages": true? I looked through existing issues and did not see any references to it.

Example 1

HTML

<div class="media">
    <img src="undefined" alt="Image from tweet">
</div>

Displayed HTML

Original Tweet

images[n]

<div class="timeline-Tweet-media">
    <div class="PrerenderedCard" data-card-name="summary_large_image" data-css="https://ton.twimg.com/tfw/css/syndication_bundle_v1_826d162568fd5604ef605f485c8050cdbc7a7b99.css" data-scribe="component:card">
        <div class="TwitterCardsGrid TwitterCard">
            <script type="text/twitter-cards-serialization">
                { "strings": { }, "card": { "forward" : "false", "is_logged_in" : false, "is_author" : false, "language" : "en", "card_name" : "summary_large_image", "token" : "", "card_uri" : "https://t.co/DQbE7e5l77", "tweet_id" : "705821491758141440", "card_url" : "https://t.co/DQbE7e5l77" }, "scribeData": { "card_name": "summary_large_image", "card_url": "https://t.co/DQbE7e5l77" } }
            </script>
            <div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
                <a class=" js-openLink u-block TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--small" href="https://t.co/DQbE7e5l77">
                    <div class="SummaryCard-image TwitterCardsGrid-float--prev">
                        <div class="tcu-imageContainer tcu-imageAspect--1to1">
                            <style>
                            .tcu-image-705821491758141440 {
                                background-size: 3em !important;
                            }
                            </style>
                            <div class="tcu-imageWrapper tcu-image-705821491758141440 js-cspForcedStyle" data-style="background-size: 3em;">
                            </div>
                        </div>
                    </div>
                    <div class="SummaryCard-contentContainer TwitterCardsGrid-float--prev">
                        <div class="SummaryCard-content">
                            <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline">Looks like interacting in Virtual Reality is a lot better than a few years…</h2>
                            <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline">Looks like interacting in Virtual Reality is a lot better than a few years back. But maybe it is a little too good! Check out the dangers too in the video… - Jason Mayes - Google+</p>
                            <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination">plus.google.com</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

Example 2

HTML

<div class="media">
    <img src="undefined" alt="Image from tweet">
</div>

Displayed HTML

Original Tweet

images[n]

<div class="timeline-Tweet-media">
    <article class="MediaCard
           MediaCard--mediaForward

           cards-multimedia
           customisable-border" data-scribe="component:card" dir="ltr">
        <div class="MediaCard-media">
            <div class="MediaCard-widthConstraint js-cspForcedStyle" style="max-width: 800px" data-style="max-width: 800px">
                <div class="MediaCard-mediaContainer js-cspForcedStyle" style="padding-bottom: 100.0000%" data-style="padding-bottom: 100.0000%">
                    <a href="https://twitter.com/TwitterDev/status/705436774441623554" class="MediaCard-mediaAsset MediaCard-mediaPlaceholder
                    NaturalImage NaturalImage--fill

                    js-playableMediaInterstitial">
                        <div class="NaturalImage-ctaOverlay PlayButton PlayButton--centered" data-scribe="element:play_button">
                            <div class="Icon Icon--playCircle " aria-label="Play Media" title="Play Media" role="img"></div>
                        </div>
                        <img class="NaturalImage-image" src="https://pbs.twimg.com/tweet_video_thumb/Cco29woW8AAMqS3.jpg" alt="" data-scribe="element:poster_image">
                    </a>
                </div>
            </div>
        </div>
    </article>
</div>

Although a bit crude, adding a check to see if the result of extractImageUrl() is not undefined appears to work.

if (showImages && images[n] !== undefined && extractImageUrl(images[n]) !== undefined) {
  op += '<div class="media">' +
      '<img src="' + extractImageUrl(images[n]) +
      '" alt="Image from tweet" />' + '</div>';
}

Also, are you open to a pull request that adds a config option for choosing between data-src-1x and data-src-2x?

[FR] Auto-refresh

A neat feature to have is an inbuilt auto-refresh to refresh the twitter widget every minute or so. As of right now, when I call the function on a timeout it creates a new script element in the head of the document every time the function is called.

Customise html output

Hi there,

Thanks for this, it's a real time saver.

Is there a way I can customise the HTML output of a tweet? For example access the inner content of p.timePosted independently of the rest of the tweet?

At present trying to parse the string returned with jQuery but it's getting a little messy, plus not working to boot!

Cheers

Lacks bower.json

Project lacks a bower.json! It would be a great thing to have!

Disabling picture requests ?

Hi Jason,

Thanx for sharing your work.

... you got it : I don't need any images from twitter on my website, yet there are a lot of requests going on. Is there a way i can ask to bypass any image requests ?

Cheerz !

Johan

Loads profile pictures even if the showUser option is set to false

A website with showUser option set to false loads profile pictures at the background even if they are not shown at the website

It behaves this way with v10 (I'll test it with v11 ASAP) in Google Chrome v3x and Internet Explorer v11

My function initialization:

twitterFetcher.fetch('1234567890', 'twitter', 5, true, false, true, formatDate, false, handleTweets, false);

Printscreen:

bower package ist ouf of date

Bower gets the version 14.0.0 instead of the 15.0.0

User Avatar not displaying

As of yesterday (16th Novemeber) the user avatar for the twitter feed no longer displays. I was previously using version 12, and updated to the latest version. However, the avatar fails to display on either version

Examples not working on my machine.

Codepen examples work great. jasonmeyes.com examples work great. I download the zip, extract all the files/folders to the same directory, open the index.html, and it's not working. It can read all the files in the correct directories, and editing CSS makes effective changes... just can't pull Twitter info.

Furthermore, when I download zip directly from codepen, and extract the zip files/folders to same directory, I open index.html and examples won't populate.

I've tested on both MAC OSX (Yosemite) and Windows 7 Professional (both 64bit), with Firefox, Safari, Chrome, and Internet Explorer. Still nothing.

ie8 - Object doesn't support this property or method

Great work :) Unfortunately I am repeatedly running into error in ie8. I have stripped down the code to the bare min but still getting this issue using v13.0.

AMD/Browserify/CommonJS support

Would you be interested in this? I might be able to add it.

Moment should not be installed together

Well, there is no reason to install the 'Moment' lib together when using bower. The one who wants to use the alternative that uses Moment, will be able to install it. Better than to force the one who dont needs it, to remove it.

combine results from multiple queries

Is there a method/option to combine results from multiple search ids into 1 list? The widget creator doesn't always take kindly to boolean operators.

customCallbackFunction is not a function

Seems to be a problem running a custom function

Debugging config left in recent commit

Hi, thanks for this awesome script :)

It looks like this commit:
ceb1032

added some code at the end to do a test config pull, and then console log its output. It's in both the development and minified production versions of the script. Might need to take it back out? :)

Insecure Reponse Error

Hey Jason,

Your Twitter Fetcher is awesome and I've been using it without problems for the last couple of weeks, but today, when I tried to load it I got this error message from the Console:

twitterFetcher.js:163 GET https://cdn.syndication.twimg.com/widgets/timelines/708033764807483393?&lan…witterFetcher.callback&suppress_response_codes=true&rnd=0.5455620516036825 net::ERR_INSECURE_RESPONSE

I did some researching on my own and some people are saying it's a protective feature from Chrome, which considers this resource insecure and blocks it, but like I said, I've been using your API for the last few weeks without a hitch, so I'm a bit confused as to why the browser suddenly started throwing errors today. What are your thoughts? Do you think it's a problem on my end or no?

Add tweets to container while maintaining contents

Is there a way to have tweets appear along side static content (without being separated by a wrapper)? Something like:

<li>static content</li>
<li>static content</li>
<li>tweet one</li>
<li>tweet two</li>

Where does maxTweet limit come from?

Hi! Starting to use your solution. First of all, thank you for your work =)

And my question is: why is the max number of tweets limited to 20? Seems it's not the plugin feature, as I tried editing some code there with no result.

Doesn't load on Chrome for Mac

Hi Jason,
I've been using your plugin for my last couple websites, and for some reason, it doesn't like Chrome for the Mac... I noticed it doesn't work on your demo site at all either, no content is loaded.
Works perfectly on all Windows browsers (firefox, chrome, IE),
and Safari/Firefox for Mac.

Noticed this issue about a year ago, but never did anything about it.
You may not have a Mac to test on, so let me know if theres anything I can do to remedy this issue.

Thanks

TypeError in console

Hi, have not changed or modified a single line, just plugged in and have this error in firefox console:

TypeError: f is null

...="<ul>";g<a;)h+="<li>"+c[g]+"</li>",g++;f.innerHTML=h+"</ul>"}else A(c);x=!1;0<u...

Chrome:
Uncaught TypeError: Cannot set property 'innerHTML' of null

Line 20

Unique containers for each tweet

Very much appreciate this script. Makes life much easier.

Im researching the possibility to place tweets in various places on the same page. Instead of outputing the tweets to one container, I would like to loop through the feed, assign each individual feed to a var, and maybe slice the results (1 item) for each container.

something like this:
$("#twitter1").html(items.slice(0, 1));
$("#twitter2").html(items.slice(1, 2));
$("#twitter3").html(items.slice(2, 3));

<ul>
    <li id="twitter1"></li>
    <li id="other-item"></li>
    <li id="twitter2"></li>
    <li id="random-item"></li>
    <li id="twitter3"></li>
</ul>

thank you for any tips, advice...

Stopped working

Hi, on my website (and on http://www.jasonmayes.com/projects/twitterApi/ too) the fetcher doesnt work anymore. Maybe some Twitter changes to API?

Thank you!

Method to get the raw tweets

Is there a method to get the content of the tweets without TPF altering it (not links, html)?

I use this but I'm undoing work already done:

    function updateTwitter (posts) {
        var $post = $($.parseHTML(posts[0]));
        var text = $post.filter('.tweet').text(); //GET RAW TWEET
        $('.js-twitter-post').text(text);
    }
    var config1 = {
      id: '....',
      maxTweets: 1,
        customCallback: updateTwitter
    };
    twitterFetcher.fetch(config1);

strip the white space before "twitter verified" tick

<div class="user">
    <a>
        <img />
        <span>
            <span data-scribe="element:name">Barack Obama</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span title="Verified Account" aria-label="Verified Account" data-scribe="element:verified_badge">✔</span>
        </span>
        <span>@BarackObama</span>
    </a>
</div>

For some reason twitter injects 8 none breaking spaces before the "twitter verified" tick.
Its possible to remove this gap by adding a negative margin to the verified account span like so...

span[title="Verified Account"] {margin-left: -32px}

but it would be nicer to avoid this hack by having the plugin strip the white space, if that's possible. please and thankyou :)

Loading a single tweet by url

Hey!

Firstly let me say thank you so much for building this tool, it's incredible!

I'm not 100% what I'm asking even counts as an issue but is there a way to use the fetcher to do a dataOnly request for a certain single tweet by url or similar?

Language

Is it possible to override the default language to something else?

For example translate "Posted 37 minutes ago"?

Ah, can we make the lang= parameter an option? So we could set it to lang=nl.

https://github.com/jasonmayes/Twitter-Post-Fetcher/blob/master/js/twitterFetcher.js#L105

Thanks !

Test script on twitterFetcher.js causes error

The piece of code below seems to be a test. Lines 370 until 380.

`var config8 = {
"id": '345170787868762112',
"dataOnly": true,
"customCallback": populateTpl
};

twitterFetcher.fetch(config8);

function populateTpl(tweets){
console.log(tweets);
}`

I got the error: "Uncaught ReferenceError: twitterFetcher is not defined" on Console.
After removing it the script works again.

twitter CustomCallbacks

Hi, I am new at jQuery. How to pass custom callbacks to make the feed like the attached screenshot?
So that the feed appears like
First, The Tweets
Second, Twitter Username/Screen-name
Third, Posted Time

https://cloud.githubusercontent.com/assets/5397835/7674977/f71fccbc-fd53-11e4-98e9-e9af6e130a5a.jpg

Tweet time is undefined in Firefox as there's no .textContent fallback to .innerHtml

Hello!

Just noticed a little buggette - the time attribute when requesting dataOnly is undefined in firefox as it doesn't support innerText - looks like you have a test for innerText support and fall-back to .textContent elsewhere in the code but missed it on line 254 (latest v15 build), i've patched my local copy from:

time: times[n].innerText,

to:

time: times[n].innerText ? times[n].innerText : times[n].textContent,

Kind Regards,
Rick.

Plugin stopped working

I think Twitter may have changed something as the plugin has stopped working across many of the sites I've used the plugin on.

EDIT Just seen the plugin has been updated on the repo. Thank you for swiftly updating sir.

Examples don't seem to be working

Windows 8.1 - Windows Update turned on, so should be latest
Chrome 37.0.2062.120 m in Desktop mode

Just came across this project as server-side oAuth seems far too bulky just get the last 3 tweets to display on my site, but the example DIVs aren't being populated - all I'm seeing is the H2 content.

license

Hey, nice plugin :)
However could you tell us what license applies for the code?
Thank you so much and have a nice day!

Cannot display attached images

Hey there,

Is there any way to display an image that was uploaded with a tweet?

Thanks,

Harley

2x Images

Any plans to make use of the data-src-2x attribute? Looks like the small avatars are being displayed on my 'retina' screen.

Link query string often too long

At the risk of being too localised, is it possible to have an option to remove query strings? More specifically, analytics-based query strings.
?utm_medium=feeds&utm_source=data-analytics … for example.

Or limiting the number of characters?
Or even just showing the twitter shortened link instead, ie - t.co/dkj...

Publish to npm?

Now that we have CommonJS support, we could add it to npm as well: https://gist.github.com/coolaj86/1318304

innerHtml info in readme

Hi there I ran into an issue when I set the target to a p tag. IE8 has a major issue with this. I thought it would be a good idea to note this somewhere in your docs. Using certain tags will throw an "unknown runtime error"

http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85).aspx

is it possible to show post one by one with carousel ?

Hi there its really great and easy way to use plugin :)

i have tried to use with carousel one by one. (i have tried owl carousel )

is it possible ??

Thanks

Short URL

Is there anyway to enable tinyurl type links as when I pull the feed it pulls the full link visually when it shows the shorturl version on twitter?

It would be nice to have this "Load more"-thing.

Isn't it possible to load and show more then 20 posts? I really like your Fetcher. That's the only thing missing for a greenhorn like I am.

Only to say: Thanks a lot ...

Regards SB

Return the number of retweets and favourites in dataOnly mode

I was just wondering if its possible to retrieve the number of retweets and favourites a certain tweet has using the dataOnly mode.

Is this something which can currently be done?

User-configurable markup sequence

One other thing: I'd like to be able to specify markup order of the various elements. I imagine I'm not the only one. Different ways to do this, but the API could look something like this.

twitterFetcher.fetch( {
  "domId": 'example-with-custom-sequence',
  "maxTweets": 5,
  "enableLinks": true,
  "markupSequence": [
    "time-posted",
    "user",
    "interact"  
  ]
});

(I am happy to help if this is something you're interested in. I think there could be some major interest/exposure in this because it's so much easier than the alternative.)

Combine "dateFunction": momentDateFormatter" and"customCallback": populateTpl

I am trying to use the template version (Example 8) combined with moment (Example 6, I think). But then I get problems with the moment js. It does not run the function at all and it does not catch the language moment.locale('sv_SE');. The code looks like this:

    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>

    <script type="text/javascript" src="js/twitterFetcher_min.js"></script>
<script>

moment.locale('sv_SE');

var config = {
    "id": '573452057987973120',
    "dataOnly": true,
    "maxTweets": 3,
    "dateFunction": momentDateFormatter,
    "customCallback": populateTpl
};

function momentDateFormatter(date, dateString) {
    return moment(dateString).fromNow();
}

twitterFetcher.fetch(config);

function populateTpl(tweets){
    var html = '<ul>';
    for (var i = 0, lgth = tweets.length; i < lgth ; i++) {
        var tweetObject = tweets[i];

        html += '<li>'
        + (tweetObject.image ? '<div class="tweet-img"><img src="'+tweetObject.image+'" /></div>' : '')
        + '<p class="tweet-content">' + tweetObject.tweet + '</p>'
        + '<p class="tweet-infos">Posted on the ' + tweetObject.time + ', by ' + tweetObject.author + '</p>'
        + '<p class="tweet-link"><a href="' + tweetObject.permalinkURL + '">Link</a></p>'
        + '</li>';
    }
    html += '</ul>';

    $('#twitter-feed').append(html);
}
</script>

You can see all HTML as well over here: https://cdn.axiell.com/dev/twitter/test/index.html

How do I run moment before the template function is running?

Clearer class structure for styling?

Hey Jason, This is awesome. After fiddling with OAuth for longer than I care to admit I stumbled onto this. Bravo, sir!

One quibble I have has to do with how classes are named. I think it should be configurable in a BEM-style structure, to avoid class name collisions and make the component structure crystal clear. If you're using SCSS, this also makes styling a breeze.

Please look at my fork:

master...baloneysandwiches:master

I'm happy to revise and/or submit this a PR if this is something you are interested in incorporating.

Sorry, bug in a browser, not TwitterFetcher's

Scrolling text

It would be great to have an example that shows scrolling of tweets from the right to the left of the screen. If I implement it myself, would you consider a pull request?