Using OAuth2 to Post a tweet On Twitter

Goal

Provide the easiest way (less than 15 lines of code) to use OAuth to share a post or link on a LinkedIn account on behalf of a LinkedIn user using Javascript.

Code Example

Here is the final code - a Javascript snippet that you can tweak, and play around with instantly without any coding, configuration, etc.

https://jsfiddle.net/fyLc6kj8/2/

Code Explanation:

HTML

<a id="twitter-button" class="btn btn-block btn-social btn-twitter">
  <i class="fa fa-twitter"></i> Post a Tweet on Twitter
</a>

CSS

None

JavaScript

$('#twitter-button').on('click', function() {
    // Initialize with your OAuth.io app public key
    OAuth.initialize('HwAr2OtSxRgEEnO2-JnYjsuA3tc');
  // Use popup for OAuth
  OAuth.popup('twitter').then(twitter => {
    //Twitter provider object
    alert('You can check Twitter provider object in the console!');
    console.log('twitter:', twitter);


    twitter.post({
     url:"/1.1/statuses/update.jsonstatus=Some%20random%20Tweet"
    }).then(tweet => {
        alert('You can find created Tweet in both console and your Twitter account!');
      console.log('Created Tweet:', tweet);
      }); 
    });
})

External Requirements

This Javascript code has external requirements:

• jQuery - HTML element manipulation
  • https://code.jquery.com/jquery-3.2.1.min.js
• bootstrap, font-awesome - Look-and-feel of social buttons and icons
  • https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  • https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css
• oauth-io javascript library - Simplifies OAuth usage by hiding the nuances in the OAuth implementation of various OAuth providers, e.g., LinkedIn, Twitter, etc. behind the ratified standard OAuth2 interface
  • https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js

Step-by-step Guide

Here is a summary of the steps to create this social button to post a Tweet on Twitter on a user's behalf using OAuth2:

1. Create a Twitter account, if you do not have one
2. Create an app on Twitter using this simple step-by-step guide
3. Copy your Twitter app client id and client secret
4. Signup for OAuth.io account
5. Link your Twitter app with OAuth.io by pasting your Twitter app client id and client secret into OAuth.io
6. Copy the OAuth javascript snippet (https://jsfiddle.net/fyLc6kj8/2/) on to your web page