Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wellingtonmelo

Como definir imagem do popup de compartilhar do Facebook

Recommended Posts

Olá pessoal,

 

Estou desenvolvendo um projeto próprio, mas entendo muito pouco de programação, paguei um freelancer pra fazer uma função que mescla duas imagens e a exibe na página. No caso, pego a imagem do perfil do facebook do usuario e a mesclo com uma imagem já pronta hospedada no meu wordpress.

 

Apenas este artigo está com o teste configurado, por favor, use ele pra testar o que estou falando:

http://testesdivertidos.com.br/quantos-herdeiros-deus-vai-lhe-dar/

 

A dúvida é a seguinte, a imagem pronta é exibida no mesmo lugar, na mesma página do post, mas eu não consigo exibi-la no popup de compartilhamento do facebook.

 

Este código:

<?php
$values = get_post_custom_values("img1");
$values2 = get_post_custom_values("im2");
$img1 = "<img src=\"http://image-mix-facebook.ilhanet.com/";
$img2 = "/116x116?file=".$values[0]."\">";
?>

É que faz o mix das imagens "img1" e "img2", em seguida a hospeda, gerando uma URL como esta abaixo. E algum código a exibe na mesma página do post.

http://image-mix-facebook.ilhanet.com/1112198602176094/116x116?file=http://testesdivertidos.com.br/img/quantos-herdeiros-deus-vai-lhe-dar-6.jpg

o código "1112198602176094" é a ID do facebook do usuário, acho que é puxada pelo código:

'+response.id+'

só não sei dizer como o sistema a puxa, pois esse código não aparece no código acima.

 

Agora é que entra o meu problema de fato.

Eu quero pegar essa imagem gerada e a exibir dentro do popup de compartilhamento do facebook. Já tentei de tudo (que conheço) mas não consegui o resultado.

 

Dai pra não ficar sem o botão compartilhar, usei o código abaixo para compartilhar uma imagem padrão do post, configurada dentro do próprio post, puxando o link da página pelo: <?php the_permalink() ?> dentro de um código de compartilhar do facebook:

<a href="javascript: void(0);" data-layout="button_count" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>','ventanacompartir', 'toolbar=0, status=0, width=650, height=450');"><img src="http://ostestes.com/wp-content/themes/ostestes/img/compartilhar.png"></a>

Alguém sabe me dizer como pegar essa URL gerada e exibi-la dentro do popup de compartilhamento do facebook?

 

 

Nossa, escrevi demais, mas tentei passar os detalhes, para ver se alguém entende a situação.

 

Grato por toda ajuda possível!!!

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
No link (no seu caso, no atributo onclick) do botão que abre a caixa de compartilhamento, você tem que passar o parâmetro picture para o link ficar nesse padrão:




Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa Anderson !!

 

Obrigado cara, funcionou legal, exatamente o que eu precisava.

Coloquei os dois botões na página, o primeiro é com o seu código, puxando uma URL que foi gerada antes, caso queira, pode dar uma olhada aqui: AQUI!

 

Agora só precisamos entender como a URL é formada e pegar o código e colocar no lugar dessa URL, que vem após o: &picture=

 

Compreende?

 

Vejamos o código, já usando o código que você me passou, ficou assim:

(Vou quebrar linha pra aparecer tudo)

<a href="javascript: void(0);" data-layout="button_count" 
onclick="window.open('https://www.facebook.com/sharer.php?u=<?php the_permalink() ?>
/&picture=http://image-mix-facebook.ilhanet.com/1112198602176094/116x116?file=http://testesdiver
tidos.com.br/img/quantos-herdeiros-deus-vai-lhe-dar-4.jpg','ventanacompartir', 'toolbar=0, 
status=0, width=650, height=450');"><img src="http://testesdivertidos.com.br/compartilhar.png"></a>

Daí, precisamos ver uma forma de no lugar desse código que começa após o &picture= puxar o código da imagem gerada.

 

Essa imagem é exibida dentro da div "<div id="status"></div>"

 

É possível fazer algum código que puxe a URL da imagem que aparecer dentro dessa div?

 

 

Obrigado Anderson, gratidão cara!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Beleza!!

 

Analisando o código fonte gerado na sua página... você vai ter que fazer por JavaScript, porque é lá que é feita a busca pelo ID do usuário no Facebook.

 

Na sua página tem esse código que pega o ID e faz aparecer a imagem na página:

 

 

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI(accessToken) {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me?fields=birthday,email,name,age_range&access_token=' + accessToken, function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('loginBtn').innerHTML = '';
      document.getElementById('status').innerHTML =
//          '<img src="https://graph.facebook.com/'+response.id+'/picture?type=small">'+
          '<img src="http://image-mix-facebook.ilhanet.com/'+response.id+'/116x116?file=http://testesdivertidos.com.br/img/quantos-herdeiros-deus-vai-lhe-dar-7.jpg">';
//          'Thanks for logging in, ' + response.name + '!';
 
    });
  }

 

O que você precisa agora é, abaixo da linha que carrega a imagem, alterar o evento onclick do botão compartilhar e adicionar o parâmetro picture.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado novamente Anderson!

 

Cara, acho que não compreendi bem o que devo fazer, eu não entendo de programação, eu entendo bem estrutura de página, design, html, css, mas programação eu sei o basico do basico. Vou fazendo as coisas, montando os códigos prontos! rsrs

 

Bom, esse código que você mostrou aí, é esse aqui:

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI(accessToken) {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me?fields=birthday,email,name,age_range&access_token=' + accessToken, function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('loginBtn').innerHTML = '';
      document.getElementById('status').innerHTML =
//          '<img src="https://graph.facebook.com/'+response.id+'/picture?type=small">'+
          '<?php echo $img1; ?>'+response.id+'<?php echo $img2; ?>';
//          'Thanks for logging in, ' + response.name + '!';

    });
  }

O que código que gera a URL já hospedada é esse: <?php echo $img1; ?>'+response.id+'<?php echo $img2; ?>

 

Ele é gerado por essa função aqui:

         $values = get_post_custom_values("imagem1");
         $values2 = get_post_custom_values("imagem2");
         $img1 = "<img src=\"http://image-mix-facebook.ilhanet.com/";
         $img2 = "/116x116?file=".$values[0]."\">";
         ?>

Mas eu coloquei esse código que já é da imagem hospedada, e não funcionou, coloquei assim, veja essa imagem, por favor: IMAGEM CÓDIGO

 

há muito tempo trabalho nesse projeto, só falta esse botão! hehe

 

Obrigado cara!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Um detalhe que vi aqui...

 

Quando coloco apenas o código solto na página:

<?php echo $img1; ?>'+response.id+'<?php echo $img2; ?>

Ele gera o $img1 e o img2, só não gera o que era pra ser a foto do perfil,

ele gera a mesma imagem de cima, só que quebrada e sem a foto do perfil:

http://image-mix-facebook.ilhanet.com/'+response.id+'/116x116?file=http://testesdivertidos.com.br/img/quantos-herdeiros-deus-vai-lhe-dar-5.jpg

Se puder me ajudar, ficarei grato! abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente colocar assim:

<a href="javascript: void(0);" data-layout="button_count" onclick="window.open('http://www.facebook.com/sharer.php?u=http://testesdivertidos.com.br/quantos-herdeiros-deus-vai-lhe-dar/&picture=http://image-mix-facebook.ilhanet.com/'+window.USER_ID+'/116x116?file=http://testesdivertidos.com.br/img/quantos-herdeiros-deus-vai-lhe-dar-5.jpg','ventanacompartir', 'toolbar=0, status=0, width=650, height=450');"><img src="http://ostestes.com/wp-content/themes/ostestes/img/compartilhar.png"></a>

E na função (adicionar a linha do window.USER_ID):

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI(accessToken) {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me?fields=birthday,email,name,age_range&access_token=' + accessToken, function(response) {
      window.USER_ID = response.id;
      console.log('Successful login for: ' + response.name);
      document.getElementById('loginBtn').innerHTML = '';
      document.getElementById('status').innerHTML =
//          '<img src="https://graph.facebook.com/'+response.id+'/picture?type=small">'+
          '<img src="http://image-mix-facebook.ilhanet.com/'+response.id+'/116x116?file=http://testesdivertidos.com.br/img/quantos-herdeiros-deus-vai-lhe-dar-7.jpg">';
//          'Thanks for logging in, ' + response.name + '!';
 
    });
  }

Compartilhar este post


Link para o post
Compartilhar em outros sites

Rapaz, tentei exatamente assim como você me mandou, mas não funcionou,

 

A questão é que não podemos deixar essa imagem fixa, a que vem após o 116x116?file=

 

Tem que vim o código /116x116?file=".$values[0]."\

 

Que é ele que gera as imagens mescladas, veja a função:

         $values = get_post_custom_values("imagem1");
         $values2 = get_post_custom_values("imagem2");
         $img1 = "<img src=\"http://image-mix-facebook.ilhanet.com/";
         $img2 = "/116x116?file=".$values[0]."\">";
         ?>

E acho que quando eu coloquei o, window.USER_ID, não funcionou a função que faz uma escolha aleatoria nas imagens.

 

O segredo está nesse código, como podemos coloca-lo como URL ?

 

Exemplo:

<img src="http://image-mix-facebook.ilhanet.com/'+response.id+'/116x116?file=".$values[0]."">
<img src="<?php echo $img1; ?>'+response.id+'<?php echo $img2; ?>">

Ambos não funcionam corretamente, como pode ver na página: http://testesdivertidos.com.br/quantos-herdeiros-deus-vai-lhe-dar/

 

Obrigado Anderson!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Um cara me disse que não da pra carregar a URL de uma imagem dentro do src="" através de código PHP, como nesse caso que estou tentando fazer.

 

Complicou.

 

Não sei como puxar essa imagem que é gerada.

 

Ela é gerada dentro da div

<div id="status"></div>

É possível de alguma forma criar uma variável que puxe qualquer imagem que esteja dentro dessa div, algo desse tipo?

 

Toda ajuda é bem vinda!

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Anderson, obrigado pela ajuda amigo!

 

Mas paguei um programador pra fazer a função. Projeto tava atrasado demais.

 

Gratidão cara, abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.