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.
https://twitter.com/share?text={text}&url={url}
Parameters
text - text contenturl - URL location to be shared
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.
