<div class="container text-center" style="margin-top: 10px">

  <div style="margin: 10px;">
    <div class="help-block">
      STEP1: Click next button
    </div>
    <div id="twitter-share-display" class="btn btn-sm btn-primary">Display tweet button</div>
  </div>

  <div style="margin: 10px;">
    <div class="help-block">
      STEP2: Click Tweet button
    </div>
    <div id="twitter-share-button" style="magin: 20px;"></div>
  </div>

  <div style="margin: 10px;">
    <div class="help-block">
      STEP3: Display thanks message
    </div>
    <div id="twitter-share-thanks"></div>
  </div>
</div>
$(function() {
  $("#twitter-share-display").click(function() {
    console.log("clicked");
    initTwitterAPI(
      function(event) {
        window.twttr.widgets.createShareButton(null, document.getElementById('twitter-share-button'));
      },
      function(event) {
        document.getElementById('twitter-share-thanks').innerHTML = "thank you your tweet!!";
      }
    )
  });
});

function initTwitterAPI(loadedHandler, clickHandler) {
  window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
      t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
      t._e.push(f);
    };
    return t;
  }(document, "script", "twitter-wjs"));

  window.twttr.ready(function(twttr) {
    window.twttr.events.bind('loaded', function(event) {
      if (!event) return;
      loadedHandler(event);
    });
    window.twttr.events.bind('click', function(event) {
      if (!event) return;
      clickHandler(event);
    });
  });
};
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js