5

My component:

<aura:component description="TwitterTile">
    <ltng:require scripts="{!$Resource.Lib + '/js/twitter.js'}"

    <blockquote class="twitter-tweet" data-lang="en">
    <p lang="nl" dir="ltr">
    Blogposts met lijstjes zijn enorm populair. <a href="https://twitter.com/hashtag/ContentCuration?src=hash">#ContentCuration</a>
    helpt om eenvoudig info te verzamelen en te publiceren <a href="https://t.co/o2084v3hj3">https://t.co/o2084v3hj3</a>
    </p>
    &mdash; Test (@Test) <a href="https://twitter.com/HowardsHome/status/748793773069524993">July 1, 2016</a>
    </blockquote>

</aura:component>

It actually works but only if I disable LockerService. If I don't I get the following error:

Uncaught TypeError: Cannot read property 'prototype' of undefined throws at /resource/1473175316000/Lib/js/twitter.js:11:20036

The twitter.js file is a copy/paste from https://platform.twitter.com/widgets.js

This should've been the easiest component ever. I didn't yet start on making the content dynamic but that would've been the next step.

Anyone an idea what I can do to make it work?

Improve this question
7
  • 2
    Lightning framework has limited set of Javascript native functions available. You will have to find and add all dependencies to make a script work which expect a free access to DOM
    – Ashwani
    Sep 7, 2016 at 11:50
  • 1
    @Jovabe, as Ashwani mentioned, there are a lot of limitations with Locker Service and it's native JavaScript function. I was trying to follow along what twitter does with their embed and they're doing a couple of things that goes against what Locker Service allows you to. One of them being appending script tags to load CSS dynamically. I haven't really found a solution within Locker Service. However, I did have an idea of creating a service that embeds social media for you via an iFrame (assuming the social media uses oembed services). I haven't tried it yet though, but it's just an idea.
    – kev_panda
    Sep 7, 2016 at 19:31
  • @Jovabe Does your solution above still work for you with LockerService turned off? It doesn't seem to work for me :-(
    – kev_panda
    Nov 1, 2016 at 18:53
  • @kev_panda Kind of a moot point as LockerService is non-optional soon.
    – Jovabe
    Jan 9, 2017 at 12:58
  • @Jovabe yeah, I just found out about that recently. Things are going to break for us for sure :-(
    – kev_panda
    Jan 9, 2017 at 21:00

1 Answer 1

Reset to default
0

The easiest way to do this is embed a Visualforce page inside a Lightning Component with the timeline using the Twitter API.

I've wrote a post about this, but I'll explain the gist of it here.

  1. Use https://publish.twitter.com to create a HTML snippet for the VF page

  2. Create a Lightning component which iFrames the VF page

  3. Use Design / Component attributes to allow changing the referenced Twitter Timeline via the Lightning App Builder interface.

This avoids most of the hassle around LockerService, and you can customise it using the embedded timeline parameters that Twitter supplies.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .