javascript - transparente - Cómo publicar un tweet usando Codebird PHP desde la ventana emergente

ventana modal jquery ejemplo

Question

Intento permitir que los visitantes de mi sitio publiquen un tweet con una imagen directamente desde el sitio. Estoy usando la biblioteca Codebird PHP para lograr esto. Hasta ahora, todo está funcionando correctamente, sin embargo, no hay una vista previa de la publicación antes de que se publique en la cuenta del usuario. Actualmente, solo se publica directamente en su cuenta tan pronto como hacen clic en el botón.

Lo que me gustaría es tener una ventana emergente emergente en la que les pedirá que inicien sesión si aún no han iniciado sesión, o les mostrará una vista previa del tweet y les permitirá hacer clic en el botón "Tweet" si están conectados como en esta imagen:

Aquí está mi 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");

Y aquí está mi 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

En el clic del botón, necesita otra función que abra la ventana emergente junto con un botón de tweet.

Agregue el detector de eventos de clic como postTweet al nuevo botón de tweet.

Creé un fragmento de muestra. Verifíquelo a continuación.

Para mostrar la vista previa en tiempo real, debe agregar el keyup evento keyup al textarea, que debe copiar su valor y agregarlo como innerHTML del panel de vista previa.

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

Intenta usar la función 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")
}
}

Answer 3

Lo primero es lo primero, usted (el pájaro del código) está utilizando la API de Twitter para publicar en Twitter, que hace uso de los estados / punto final de actualización en la API. Esta llamada es una llamada de servidor a servidor, es decir, desde el servidor donde sus archivos están alojados en el servidor de Twitter. https://dev.twitter.com/rest/reference/post/statuses/update

Hay 2 posibilidades que veo para que puedas lograr lo que tienes en mente

-primero sería utilizar el sistema de intención web de Twitter con el que puede enviar el tweet como una cadena de consulta que abriría la ventana emergente siempre que haya incluido los archivos js de Twitter https://dev.twitter.com/web/tweet-button/web-intent

-segundo si eso no es realmente tu estilo, entonces podrías intentar algo como lo que @ceejayoz mencionó haciendo una nueva ventana creada recreando las entradas necesarias como se muestra en la imagen y siguiendo el mismo procedimiento que tienes ahora

Ahora a su pregunta, ya que tiene una imagen, la opción de intento web no funcionará, pero si es un enlace con una imagen (tarjetas de twitter), entonces creo que los bots de twitter deberían poder leer a través de la página y mostrarle una vista previa en la ventana emergente siempre que tenga las metaetiquetas correctas en la página vinculada