How to post a tweet using Codebird PHP from pop-up window

Question

I am trying to allow visitors to my site to post a tweet with an image directly from the site. I am using Codebird PHP library to accomplish this. So far everything is working correctly, however there is no preview of the post before it gets posted to the user's account. Currently, it just posts directly to their account as soon as they click the button.

What I would like is to have it pop-up a small window where it will ask them to log in if they aren't logged in yet, or it will show a preview of the tweet and allow them to click the "Tweet" button if they are logged in like in this image:

Here's my PHP:

function tweet($message,$image) {
    require_once('codebird.php');
    \Codebird\Codebird::setConsumerKey("MYCONSUMERKEY", "MYCONSUMERSECRET");
    $cb = \Codebird\Codebird::getInstance();
    session_start();

    if (! isset($_SESSION['oauth_token'])) {
      // get the request token
      $reply = $cb->oauth_requestToken([
        'oauth_callback' => 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']
      ]);

      // store the token
      $cb->setToken($reply->oauth_token, $reply->oauth_token_secret);
      $_SESSION['oauth_token'] = $reply->oauth_token;
      $_SESSION['oauth_token_secret'] = $reply->oauth_token_secret;
      $_SESSION['oauth_verify'] = true;

      // redirect to auth website
      $auth_url = $cb->oauth_authorize();
      header('Location: ' . $auth_url);
      die();

    } elseif (isset($_GET['oauth_verifier']) && isset($_SESSION['oauth_verify'])) {
      // verify the token
      $cb->setToken($_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
      unset($_SESSION['oauth_verify']);

      // get the access token
      $reply = $cb->oauth_accessToken([
        'oauth_verifier' => $_GET['oauth_verifier']
      ]);

      // store the token (which is different from the request token!)
      $_SESSION['oauth_token'] = $reply->oauth_token;
      $_SESSION['oauth_token_secret'] = $reply->oauth_token_secret;

      // send to same URL, without oauth GET parameters
      header('Location: ' . basename(__FILE__));
      die();
    }

    // assign access token on each page load
    $cb->setToken($_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
    $reply = $cb->media_upload(array(
        'media' => $image
    ));
    $mediaID = $reply->media_id_string;
    $params = array(
        'status' => $message,
        'media_ids' => $mediaID
    );
    $reply = $cb->statuses_update($params);
}

tweet("Tweet tweet","assets/tweet.jpg");

And here's my Javascript/HTML:

function postTweet() {
  $.ajax({
    type: "POST",
    url: 'tweet.php',
    data:{action:'call_this'},
    success:function(html) {
      alert('Success!');
    }
  });
}
<button class="download-share" onclick="postTweet()">Download and Share</button>

Answer 1

In the button click, you need another function that open the popup along with a tweet button.

Add the click event listener as postTweet to the new tweet button.

I created a sample snippet. Check it below.

To show the real time preview, you need to add the keyup event listener to the textarea which should copy it's value and add it as the innerHTML of the preview pane.

function openTweet(){
    document.getElementsByClassName("preview")[0].style.display="";
    document.getElementById("tweetPr").innerHTML = document.getElementById("tweet").value;
    document.getElementById("tweet").addEventListener("keyup",
      function(){
          document.getElementById("tweetPr").innerHTML = document.getElementById("tweet").value;
      });
      document.getElementsByClassName("download-share")[0].style.display="none";
}

function postTweet() {
  $.ajax({
    type: "POST",
    url: 'tweet.php',
    data:{action:'call_this'},
    success:function(html) {
      alert('Success!');
    }
  });
}

<div style="display:none;" class="preview"><textarea id="tweet"> </textarea><div id="tweetPr"></div><button onclick="postTweet();">Tweet</button></div>
<button class="download-share" onclick="openTweet()">Download and Share</button>

Answer 2

First things first, you(codebird) are using the twitter API to post to twitter, which makes use of the statuses/update endpoint in the API. This call is a server to server call, ie from the server where your files are hosted to the twitter server. https://dev.twitter.com/rest/reference/post/statuses/update

There are 2 possibilities i see for you to accomplish what you have in mind

-first would be to use twitters web intent system with which you can send the tweet as a query string which would bring up the popup provided you have included the twitter js files https://dev.twitter.com/web/tweet-button/web-intent

-second if thats not really your style then you could try something like what @ceejayoz mentioned making a new window created by you recreating the necessary inputs as shown in the picture and follow the same procedure you have now

Now to your question, Since you have an image the web intent option will not work, but if its a link with an image( twitter cards ) then i think the twitter bots should be able to read through the page and show you a preview in the popup provided you have the right meta tags on the linked page

Answer 3

Try use the function window.open

https://www.w3schools.com/jsref/met_win_open.asp

function postTweet() {
      $.ajax({
        type: "POST",
        url: 'tweet.php',
        data:{action:'call_this'},
        success:function() {
          success = true
        }
      });
      if(success)
      {
         window.open('tweet.php', "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400")
      }
}