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?

  • 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 '16 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 '16 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 '16 at 18:53
  • @kev_panda Kind of a moot point as LockerService is non-optional soon. – Jovabe Jan 9 '17 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 '17 at 21:00
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.