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

admin管理员组

文章数量:1344946

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>

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>

• javascript
• php
• jquery
• twitter
• codebird

Share Improve this question Follow edited Jun 6, 2017 at 4:50 Sᴀᴍ Onᴇᴌᴀ 8,28588 gold badges3737 silver badges6060 bronze badges asked Jun 2, 2017 at 14:50 APAD1APAD1 13.7k88 gold badges4646 silver badges7272 bronze badges 10

• 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")
      }
}

本文标签： javascriptHow to post a tweet using Codebird PHP from popup windowStack Overflow