Я пытаюсь разрешить посетителям моего сайта публиковать твиты с изображениями прямо с сайта. я использую 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>
При нажатии кнопки вам нужна еще одна функция, которая открывает всплывающее окно вместе с кнопкой твита.
Добавьте прослушиватель события click как postTweet
на новую кнопку твита.
Я создал образец фрагмента. Проверьте это ниже.
Чтобы показать предварительный просмотр в реальном времени, вам нужно добавить keyup
прослушиватель события для textarea, который должен скопировать его значение и добавить его в качестве 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>
Прежде всего, вы (codebird) используете API Twitter для публикации в Твиттере, который использует конечную точку состояния / обновления в API. Этот вызов является вызовом с сервера на сервер, то есть с сервера, на котором ваши файлы размещаются, на сервер Twitter.
https://dev.twitter.com/rest/reference/post/statuses/update
Есть 2 возможности, которые я вижу для вас, чтобы выполнить то, что вы имеете в виду
-Во-первых, нужно использовать систему веб-намерений твиттеров, с помощью которой вы можете отправлять твит в виде строки запроса, которая будет вызывать всплывающее окно при условии, что вы включили JS-файлы Twitter.
https://dev.twitter.com/web/tweet-button/web-intent
-во-вторых, если это не ваш стиль, то вы можете попробовать что-то вроде того, что упомянул @ceejayoz, создав новое окно, созданное вами, воссоздав необходимые входные данные, как показано на рисунке, и следуйте той же процедуре, что и сейчас.
Теперь на ваш вопрос: так как у вас есть изображение, опция веб-намерения не будет работать, но если это ссылка с изображением (твиттер-карты), то я думаю, что боты-твиттеры должны быть в состоянии прочитать страницу и показать вам предварительный просмотр в всплывающее окно, если у вас есть правильные метатеги на связанной странице
Попробуйте использовать функцию 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")
}
}