Social Sharing by JavaScript , Facebook & Twitter APIs Integration

Table of contents

Reading Time: 2 minutes

Social Sharing by JavaScript is one of the biggest and time taking tasks.

In this blog, I am going to share how can we easily share our content on Facebook or Twitter-like applications.

In this blog, we are going to integrate APIs that are given by Facebook and Twitter. By this, we will share our content on Facebook and Twitter.

What is API?

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message or check the weather on your phone, you’re using an API.

In basic terms, APIs just allow applications to communicate with one another.

When people speak of “an API”, they sometimes generalize and actually mean “a publicly available web-based API that returns data, likely in JSON or XML”. The API is not the database or even the server, it is the code that governs the access point(s) for the server.

They allow us to go get data from outside sources.

We can send an API a request detailing the information we want.
APIs allow our sites to alter data on other applications, too. For instance, you’ve probably seen “Share on Facebook” or “Share on Twitter” buttons on miscellaneous websites. When/if you click one of these buttons, the site you’re visiting can communicate with your Facebook or Twitter account, and alter its data by adding new status or tweet.

Prerequesties:

Knowledge of basic JavaScript.

Integrate Facebook Sharer API:-

You can add quick and simple ways for people to post content from your website to Facebook.

Facebook Sharer Api:-  "https://www.facebook.com/sharer/sharer.php?u="; 

function shareOnFacebook(){
  const navUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + 'https://github.com/knoldus/angular-facebook-twitter.git';
  window.open(navUrl , '_blank');
}

Create Button In Html File:

<button id="fb">FB Share</button>

Attach function with button:-

const fb = document.getElementById('fb');
fb.addEventListener('click', shareonFacebook);

Click the button and this window will pop up on the screen with your Facebook Id.

Integrate Twitter Intent API:-

A Tweet Web Intent makes it easy for your site visitors to compose and post a Tweet to their audience from a link on your webpage. Sites may configure Tweet text and hashtags, pass a URL, and identify Twitter accounts related to the page.

Twitter Intent Api:-  `https://twitter.com/intent/tweet?text=`; 

function shareOnTwitter() {
  const navUrl =
    'https://twitter.com/intent/tweet?text=' +
    'https://github.com/knoldus/angular-facebook-twitter.git';
  window.open(navUrl, '_blank');
}

Create Button In Html File:

  <button id="twitter">Twitter</button>

Attach function with button:-

const tweet = document.getElementById('twitter');
tweet.addEventListener('click', shareOnTwitter);

Click the button and this window will pop up on the screen with your Twitter Id.

Conclusion

So today we learn what is API and how can we integrate Facebook Sharer Api & Twitter Intent API. How we can share our content with these two applications by javascript. We can also use this approach in Angular, React applications and share our content.