[SalesForce] Embedding Tweet on Lightning Component 2

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?

Best Answer

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.

Related Topic