Social sharing(LinkedIn/Twitter) with webMethods API Portal

[Arul_Pragasam_Rajendran]

Sharing

webMethods API Portal allows to share an API to let your contacts know about anything interesting you found about the API in the platform. Out of the box API Portal supports sharing of API links via below channels

• Share via Facebook Feed
• Share via Email

with little knowledge on Javascript & HTML we could enhance the sharing capability to other well known platforms as well. As part of this tutorial we will expore how do we add share icon for Twitter/LinkedIn sites.

Share URLs

The very basic information required to enable the functionality would be, the customizer must know the share URLs of sites.

Twitter

https://twitter.com/share?text={text}&url={url}

Parameters

• text  - text content
• url - URL location to be shared

LinkedIn

https://www.linkedin.com/sharing/share-offsite?url={url}

Parameters:

• url - URL location to be shared

There is a github repository (https://github.com/bradvin/social-share-urls) which captures different URLs for popularly known social sites. You can refer the repository incase if you would like to integrate with any other platforms.

How to enable links

Step I:

Create a new modification set in API Portal and lets name it as social-share

Step II:

Edit the API details view and add below HTML snippet by replacing existing share-api('<div id="share-api"></div>') component.

<div style="display: flex; float: right">

<div id="share-api"></div>

    <a href="javascript:;" style="padding: 10px;" onclick="shareViaTwitter()">

    <span class="fa fa-2x fa-twitter" tabindex="0"></span>

    </a>

<a href="javascript:;" style="padding: 10px;" onclick="shareViaLinkedIn()">

    <span class="fa fa-2x fa-linkedin" tabindex="0"></span>

    </a>  

</div>

Step III

Implement javascript functions shareViaLinkedIn / shareViaTwitter.

function shareViaTwitter() {

     var winTop = 200;

     var winLeft = 300;

     var title = "Share API";

     var url = window.location.href.replace("#","%23");

     window.open('https://twitter.com/share?text=' + title + '&url='+url , 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + 520 + ',height=' + 350);

}

function shareViaLinkedIn() {

     var winTop = 200;

     var winLeft = 300;

     var title = "Share API";

     var url = window.location.href.replace("#","%23");

     window.open('https://www.linkedin.com/sharing/share-offsite?url='+url, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + 520 + ',height=' + 350);

}
 

Once you save and activate modification set, you will have twitter/LinkedIn icons shown in API details view. 

The modification set used for this available here.

default.twitter-share.zip (5.11 KB)