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

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 acplish 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>

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>

Share Improve this question edited Jun 6, 2017 at 4:50 Sᴀᴍ Onᴇᴌᴀ 8,2858 gold badges37 silver badges60 bronze badges asked Jun 2, 2017 at 14:50 APAD1 13.7k8 gold badges46 silver badges72 bronze badges

OK, and what's wrong with that code? Does it error out? – ceejayoz Commented Jun 2, 2017 at 14:57
No, the code is fine, but it just posts the Tweet straight away when the user clicks the button. I want it to open a pop-up where it asks them to log in if they aren't logged in, or it shows a preview of the Tweet with a "Tweet" button(like in the image above) once they are logged in. – APAD1 Commented Jun 2, 2017 at 15:09
What part of that are you having difficulty with, then? – ceejayoz Commented Jun 2, 2017 at 15:16
The part I am describing. Having the button open a pop-up window where the user is either asked to log in if they aren't already, or a preview of the tweet with a tweet button is shown so that the user can initiate the post themselves instead of it just posting immediately when they click the initial button. – APAD1 Commented Jun 2, 2017 at 15:38
OK, but that's just a window.open and a <textarea>. Take a stab at it. – ceejayoz Commented Jun 2, 2017 at 15:44

| Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

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>

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./rest/reference/post/statuses/update

There are 2 possibilities i see for you to acplish 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./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

Try use the function window.open

https://www.w3schools./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")
      }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

3 Answers 3

与本文相关的文章

评论列表(0)