+ Start a Discussion
James KeoghJames Keogh 

Twitter feed as an LWC

Hi All,

I am trying to create a Lightning Web Component for a salesforce community in Visual Studio but I believe that there is an issue with my JS somewhere that is causing it to fail.

I also plan on having an input parameter in the compontent and use a key/value pairing to replace the placeholder account for the twitter feed based upon the user defined input, but that is not currently fully configured.

JS
import { LightningElement, api, } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import Twitterjs from '@salesforce/resourceUrl/Twitterjs';

export default class Twitter extends LightningElement {

    Twitterjs = false;

    renderedCallback() {
        if (this.Twitterjs) {
            return;
        }
        this.Twitterjs = true;

        Promise.all([
            loadScript(this, Twitter + 'twitter.js'): Promise
        ])
            .then(() => {
                this.Twitterjs();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading Twitter',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
    }
@api twitterhandle
}
HTML
<template>
    <lightning-input-field field-name="twitterhandle"></lightning-input-field>
    <a class="Twitter" lwc:dom="manual" data-height="500" data-theme="light" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw" data-chrome="nofooter noborders">Tweets by TwitterDev</a>
</template>

META.XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Twitter feed</masterLabel>
    <description>This module allows you to embed a twitter feed in your community</description>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfig targets="lightningCommunity__Page">
        <property name="backgroundColor" type="Color" default="rgba(0, 255, 255, 0)">
        <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
    </targetConfig>
    <targetConfig targets="lightningCommunity__Default">
        <property name="backgroundColor" type="Color" default="rgba(0, 255, 255, 0)">
        <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
    </targetConfig>
</LightningComponentBundle>

It would be great if anyone could point out any glaring errors as I have been troubleshooting this for a number of hours now without any success.

Thanks,
​​​​​​​James
MagulanDuraipandianMagulanDuraipandian
What is the error? Can you post the error message?

<targetConfig> should be used inside <targetConfigs>. Sample Example - http://www.infallibletechie.com/2019/03/related-list-card-with-filter-and.html 
--
Magulan Duraipandian
www.infallibletechie.com