Lightning Component With Bitly Integration


About Bitly

Bitly is a URL shortening service and a link management platform. The company Bitly, Inc. was established in 2008. It is privately held and based in New York City. Bitly shortens 600 million links per month, for use in social networking, SMS, and email

Step 1. Sign-up for Bitly (FREE)

For Integration, we have to register for Bitly Account.

Step 2. Authorization with Salesoforce

For Authorization in Salesoforce. I'm using Named Credentials. because Its simplest and secure way to use.
Setup | Security Controls | Named Credentials.
Create a new Named Credential to store your Bitly username/password.


Step 4. Create BitlyIntegration Apex Classes


public class BitlyIntegration {     
    private String accessToken;
    public BitlyIntegration() {
        this.accessToken = getAccessToken();
    }
    //Method for create shorten URL from Bitly
    public String createShortenURL(String url) {
        HttpRequest req = new HttpRequest();
        //'callout' is NamedCredential Label.
        req.setEndpoint('callout:Bitly/v3/shorten' + '?access_token=' + this.accessToken + '&longUrl=' + EncodingUtil.urlEncode(url, 'UTF-8') + '&format=txt');
        req.setMethod('GET');
        Http http = new Http();
        HttpResponse res = http.send(req);
        return res.getBody();
    }
    //Method for get access token from Bitly 
    private String getAccessToken() {
        HttpRequest req = new HttpRequest();
        //'callout' is NamedCredential Label.
        req.setEndpoint('callout:Bitly/oauth/access_token');
        req.setMethod('POST');
        req.setHeader('Content-Length', '0');
        Http http = new Http();
        HttpResponse res = http.send(req);
        return res.getBody();
    }
}

Lightning Component for Bitly Integration


BitlyLightningComponent.cmp (Component)


<aura:component controller="BitlyController" implements="force:lightningQuickAction,force:hasRecordId,flexipage:availableForRecordHome">
    <aura:attribute name="fullURL" type="String">
    <aura:attribute name="shortenURL" type="String">
    <lightning:card footer="" title="Send SMS">
        <div style="padding: 10px;">
<div class="row" style="display: -webkit-box;">
<lightning:input label="Link" name="fullURL" placeholder="Full URL type here..." value="{!v.fullURL}" variant="label-hidden">
                <lightning:input class="urllink" label="Link" name="shortenURL" placeholder="Shorten URL type here..." value="{!v.shortenURL}" variant="label-hidden">
                <lightning:button label="Shorten URL" onclick="{!c.createShortenUrl}" title="Shorten URL" variant="brand">
            </lightning:button></lightning:input></lightning:input></div>
</div>
</lightning:card>
</aura:attribute></aura:attribute></aura:component>


BitlyLightningComponent.js (JS Controller )

({
   createShortenUrl: function(component, event, helper) {
        var fullURL=component.get("v.fullURL");
        console.log('fullURL ',fullURL);
        var action = component.get("c.getShortenUrl");
        action.setParams({ fullURL : fullURL });
        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log('state ',state);
            console.log(response.getReturnValue());
            component.set("v.shortenURL", response.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

BitlyLightningComponent.css

             .THIS .urllink{
                 width:89% !important;
              }


BitlyController (Apex Class to Call Bitly Integration Class)


public class BitlyController{
    @AuraEnabled
    public static String getShortenUrl(String fullURL) {
        system.debug('shortenURL '+shortenURL);
        // Service to actually call out to bitly and get a shortened url  
        BitlyIntegration service = new BitlyIntegration();
        String sUrl = service.createShortenURL(shortenURL);
        system.debug('sUrl '+sUrl);
        return sUrl;
    }
}


Bitly Lightning Component Output UI
Note: After save whole code you will drag and drop code into Lightning Record Detail Page Or Quick Action

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!

Comments

  1. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

Popular posts from this blog

Salesforce LWC : Compact Layout on Hover

Salesforce LWC With Third Party JS : D3

Communications between Lightning Components : Salesforce