In this article, I’ll show how you can embed Twitter Feeds on Lightning Pages quickly and easily.

Available on AppExchange - Download HereThis post is an example of the Twitter Timelines component available on the AppExchange. The full application allows you to embed Twitter feeds on community pages too! Check it out.


Twitter Timeline on Lightning Page

Twitter Timeline on Lightning Page

1. Using the Twitter Publish Library

First, navigate to https://publish.twitter.com. This will ask you want to embed, so copy and paste your twitter profile ID into the textbox and select ‘Embedded Timeline’.

Once you receive some code to copy and paste, save this to a location you remember. We’ll need this for our next step.

2. Create a Visualforce Page

Next, create a Visualforce Page called ‘Twitter’ to add the code we just got from Twitter.

<apex:page >
    <script src="https://platform.twitter.com/widgets.js" charset="utf-8"/>
    <a class="twitter-timeline" data-link-color="#2B7BB9" 
       href="https://twitter.com/{!$CurrentPage.Parameters.Username}"/>
</apex:page>

Notice how we’ve replaced SamCousinsGB with {!$CurrentPage.Parameters.Username}. This results in the Visualforce page using a URL parameter for the supplied account.

 

3. Create a Lightning Component

Next, create a Lightning Component called ‘Twitter’ and add the following code to the component resource:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="Username" type="String"/> 
    <iframe src="{! '/apex/Twitter?Username=' + v.Username}" 
            width="100%" height="500px;" frameBorder="0"/>
</aura:component>

We’ve created an aura:attributeto use in defining our Username. We then use an iFrame to insert our Visualforce page into the Lightning component.

Why are we using an iFrame?

Lightning is designed with a security architecture called ‘Lightning Locker Service’, which severely restricts third party code (in our case, Twitter’s API calls to display the timeline). Using an iFrame we can get around this, and still pass in attributes in the Lightning App Builder.

4. Create a Lightning design attribute

Next, we’ll create a design attribute to allow adminstrators to customise the page using the Lightning App Builder. Click on the design resource tab on the right and edit the markup to this:

<design:component label="Twitter">
  <design:attribute name="Username" label="Twitter Username" />
</design:component>

This will expose a attribute input on the Lightning App Builder, which then gets assigned to our component attribute, and then finally passed to our Visualforce page as a URL parameter.

You can also add a SVG icon at this point, to distinguish your component in the Lightning App Builder.

5. Add Twitter to Lightning Page

Twitter Custom Component

Twitter Custom Component

You’ll be able to see your component when you edit your Lightning Page in the Lightning App Builder. Drag it onto the page, it will appear blank until you specify a Username.

Click on the component you just added to the page, and check the sidebar on the right. You’ll see the Username attribute we defined earlier in the design resource.

Username Attribute

Username Attribute

Update this, and click save and that’s it! You should now see a timeline display on a Lightning Page. You might want to play around and add some more attributes to control the height of the component, or even an input to allow users to specify a Twitter account to display.

Categories: Solution

7 Comments

bhaskar · 4th December 2018 at 1:24 PM

Hi This side Bhaskar,

I need complete information regarding this API enabling.
My requirement is
Twitter feeds should be displayed in account level(Account Detail page level) based on Account Name.
suppose I have an Account called Utsav Org Ltd. then in this account level, I have linked the account name related twitter in the lighting component. Now there are no.of tweets are exchanging in at twitter level but I am not able to see those tweets at my salesforce Account Detail page level.
kindly help.

    Sam Cousins · 4th December 2018 at 3:06 PM

    Hi Bhaskar,

    You could solve this requirement by using Lightning Data Service in the Lightning Component. I should hopefully have an app published on the AppExchange soon that lets you display record-specific twitter timelines, or custom admin-specified timelines on lightning pages.

    Cheers,
    Sam

      Meghana · 19th December 2018 at 11:47 PM

      Hi Sam

      This a wonderful post with few modifications I am able to display twitter feeds specific to linked in data provided on a specific account.

      In the same way, I tried displaying LinkedIn account

      Thank you,
      Meghna

Nanda Kumar · 13th June 2019 at 5:15 PM

Hi, This was very useful. How do I now generate a report out of the twitter timeline that i have added on to the lightning component?

Nanda Kumar · 14th June 2019 at 11:39 AM

hi, is there a way to log all these tweets into an object in Salesforce that would help me then build the sentiment analysis?

David Vanek · 10th July 2019 at 3:00 PM

Hey Sam! Thanks for the article. is there any documentation to go along with the app exchange package above? was able to install but all the links to instructions are broken.

Thanks

Leave a Reply