Request help making react Twitter Feed component

[mikezimm]

Category

[ x ] Enhancement

[ ] Bug

[ ] Question

Request

This is more of a request for help making a react component that might end up here so I'm posting in this repo instead of the general one.

Old non-react Twitter feed repo

I'm looking for a twitter feed component and found one in OliverCC that is not react, is pretty old and I was not able convert it into a regular component on my own.

My attempt converting it

Since I've never really built a new react component from scratch myself (only copied/modified), I tried to hack one together without getting any outright errors.

My biggest hurdle... wiring up the widget (I think)

But I do not know if it's correct and I do not know where or how to put this line of code which calls the js widget library: twttr.widgets.load();

Summary gist of my logic

My gist with a summary of my conversion

If anyone has any ideas, I would be greatful :)
Thanks

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[mikezimm]

Small update on my attempts

I found this post on stack exchange which sounds like almost the same question from about the time the OliverCC repo as made and made a few other attempts to get it working.

I ended up trying this in the constructor

It seems to load because I can see it in the console per my log message

But this is what my screen looks like:

Since I didn't get any errors I don't think it actually made an attempt to call twitter api so I'm guessing it didn't actually do anything.

Since my screen just shows the

[mikezimm]

In a final attempt to 'react-ify' a component and get rid of raw html on the page, I made the improvements below using more proper react syntax. Now I see a link on the page instead of raw text, but I don't know if the external js library is actually wiring up right.

What my screen now looks like:

HTML classs

Code

[mikezimm]

And just to be complete (in case someone decides to help),

I went to https://publish.twitter.com/# where they give you an embed code.

For SharePoint it was this:

            <a class="twitter-timeline" 
            href="https://twitter.com/SharePoint?ref_src=twsrc%5Etfw"
            >Tweets by SharePoint</a> 
            <script async src="https://platform.twitter.com/widgets.js" 
              charset="utf-8"></script>

I added it to a classic page and it brings in the feed...
So I downloaded that exact widgets.js file from twitter so I know I had a working script file and replaced the one in my project.

I get the link but not anything else... so I'm pretty sure I just don't have it wired up right.

Here's the short version of what my component looks like:

              <a className="twitter-timeline" 
                data-link-color={this.props.linkColor} 
                data-border-color={this.props.borderColor} 
                //height={this.props.height} 
                data-chrome={dataChrome} 
                data-tweet-limit={this.props.limit}
                //width={this.props.width} 
                href={ ('https://twitter.com/' + this.props.account) }
                target="_blank"
                >{'See Tweets on Twitter for '} { (this.props.title) }  </a>

[AJIXuMuK]

Hi @mikezimm,

Have you looked at this repo?

[mikezimm]

@AJIXuMuK , I just gave it a try. At first the readme install command didn't work as typed.
I retried with: npm install react-twitter-embed --save

Then:
gulp build - no errors.
gulp serve - pages of red errors.

Any thoughts?

Do I need to install something else like babel? I never used it before.

[mikezimm]

Here is the console log so I guess I maybe just need babel installed to get rid of all those red errors?

[AJIXuMuK]

@mikezimm

So, the short answer: use react-twitter-embed version 2.0.4.

More long answer: version 2.0.4 of react-twitter-embed uses Babel v6, the next version uses Babel v7. v7 leads to an error you're experiencing.

Bonus: I have added a PR to SharePoint Framework Client-Side Web Part Samples & Tutorial Materials repo with the sample web part for Twitter timeline: link to the PR

[mikezimm]

@AJIXuMuK ,
2 short followups since I'm kind of new to this and normally just do npm install xyz....

1. What is the exact npm install to get react-twitter-embed version 2.0.4?
2. Also, what npm install do I use for babel? I checked and there seem to be a number of options when I google and I wasn't sure which to install. I presume it is an npm install right?
3. Do I need any extra @types/ installs for babel?

Thanks for the help, just have not used babel before.

[tom-daly]

I just want to add ... that all the methods either react-twitter-embed or OliverCC seem to just be wrappers to make embed code and call twitter .js file. It doesn't seem any more than going to twitter and copy embed code / add to page with script editor.

The reason I say this is b/c twitter embed doesn't support IE 11 so if you have a requirement to support that then none of those methods will work either. I've seen a hack out there but that did not work for me.

https://help.twitter.com/en/using-twitter/twitter-supported-browsers
We officially support versions of the following browsers from the past year on twitter.com:

Edge (https://microsoft.com/edge)
Safari (https://www.apple.com/safari)
Chrome (https://www.google.com/chrome)
Firefox (https://www.mozilla.org/firefox)
Any browser based on Webkit / Chromium engines (Opera, Samsung Internet, UCBrowser, etc.)

[AJIXuMuK]

Hey guys!
The PR has been merged: https://github.com/SharePoint/sp-dev-fx-webparts/tree/dev/samples/react-twitter.
If there is an actual demand - I can add the control from there to this repo.

@mikezimm - you can just start with an example web part. It also shows what modules you need to install. There is no need for Babel or any additional types.

[mikezimm]

Cool thanks @AJIXuMuK , I will give it a shot.

@tom-daly , Yes I can get the embed code from twitter using https://publish.twitter.com/ ...

But I'm trying to integrate the feed into an existing SPFx webpart so unless I'm mis-understanding, I can't just add the code to a script editor.

As a general comment, if I could get it to work only with Modern Browsers (ie not IE - no pun intended), I'm ok with that. I can just put a message in the webpart showing to click the link because you are using an unsupported browser.