Как опубликовать твит с помощью Codebird PHP из всплывающего окна

Я пытаюсь разрешить посетителям моего сайта публиковать твит с изображением непосредственно с сайта. Для этого я использую библиотеку PHP Codebird. Пока все работает правильно, однако предварительный просмотр сообщения до его публикации в учетной записи пользователя отсутствует. В настоящее время он просто публикует сообщения непосредственно на свой аккаунт, как только они нажимают кнопку.

Я бы хотел, чтобы он всплыл в маленьком окне, где он попросит их войти в систему, если они еще не вошли в систему, или покажет предварительный просмотр твита и позволит им щелкнуть по кнопке "Tweet", если они вошли в систему, как на этом изображении:

Здесь мой 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");

И вот мой 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>

Ответ 1

При нажатии кнопки вам нужна другая функция, открывающая всплывающее окно вместе с кнопкой твитта.

Добавьте прослушиватель событий клика как postTweet к новой кнопке твитта.

Я создал образец фрагмента. Проверьте это ниже.

Чтобы показать предварительный просмотр в реальном времени, вам нужно добавить прослушиватель событий keyup в текстовое поле, которое должно скопировать его значение и добавить его как innerHTML панели предварительного просмотра.

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>

Ответ 2

Прежде всего, вы (codebird) используете API-интерфейс twitter для публикации в twitter, который использует конечную точку состояния/обновления в API. Этот вызов является вызовом сервера для сервера, то есть с сервера, на котором размещены ваши файлы на сервере twitter. https://dev.twitter.com/rest/reference/post/statuses/update

Есть две возможности, которые я вижу для вас, чтобы сделать то, что вы имеете в виду

-первоначало было бы использовать систему твиттов web-твитов, с помощью которой вы можете отправить твит в строку запроса, которая вызовет всплывающее окно, если вы включили файлы twitter js https://dev.twitter.com/web/tweet-button/web-intent

-секунды, если это не ваш стиль, тогда вы можете попробовать что-то вроде того, что сказал @ceejayoz, создав новое окно, созданное вами, воссоздающее необходимые входы, как показано на рисунке, и выполните ту же процедуру, что и сейчас.

Теперь на ваш вопрос. Поскольку у вас есть изображение, параметр веб-намерения не будет работать, но если его ссылка на изображение (щебетать карты), то я думаю, что боты-роботы должны быть в состоянии прочитать страницу и показать вам предварительный просмотр во всплывающем окне, если у вас есть соответствующие метатеги на связанной странице

Ответ 3

Попробуйте использовать функцию 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")
      }
}