Ir ao conteúdo
  • Cadastre-se

Javascript Compartilhamento de imagem no Facebook via button de compartilhamento .


Posts recomendados

Estou implementando um puzzle, que será hospedado na web, e está sendo feito em: javascript, handlebars, css e usando nodejs no back-end.
Minha ideia é que ao final do jogo o usuário tenha a opção de compartilhar no facebook, um pequeno dashboard contendo algumas informações do seu desempenho no jogo, como, score, tempo gasto, etc. Eu já vi esse tipo de funcionalidade em alguns jogos.
Pensei que poderia usar o opengraph para implementar essa funcionalidade, usando as metas tags <meta og:"url" ...> , <meta "og:type" ...>, <meta "og:title" ...>, <meta "og:description" ...>, <meta "og:image" ...> .
Minha ideia era linkar dinamicamente a og:image com o endereço da screenshot da dashboard, e quando o usuário clicasse no button de compartilhamento, a screenshot da dashboard apareceria.
Mas, logo vi que isso não seria possível, pois, além de demorar alguns minutos para que os rastreadores do facebook assimilem o novo endereço da imagem, o facebook limita o números de mudanças nos parâmetros das metas tags og.
Passei o dia olhando a documentação do facebook, porém não encontrei uma forma de fazer esse tipo de compartilhamento. Há muita coisa na API de desenvolvedor do facebook, e muitas permissões diferentes que um app pode solicitar. Se tiver esse tipo de coisa, não achei.
Alguém sabe como eu poderia implementar isso à minha aplicação ?
Desde já valeu !

Link para o comentário
Compartilhar em outros sites

Consegui progredir um pouco. 

Agora consigo mudar as imagens, dinamicamente.

No campo picture  do FB.ui,  eu  insiro o endereço da imagem e a troca da imagem padrão é feita, corretamente.

Porém, eu necessito inserir na api do facebook, não uma imagem já existente, mas sim, um blob ou um elemento base64, pois o card  do usuário vem de um canvas. 

Alguém teria ideia de como eu poderia inserir isso na api do facebook ? 

<script>
    window.fbAsyncInit = async function() {

        FB.init({
         appId      : '********** ID ***********',
         xfbml      : true,
         cookie     : true,
         version    : 'v13.0'
       });
       FB.AppEvents.logPageView();


  FB.ui(
  {
    method: 'feed',
    name: ' teste name',
    caption: 'teste caption',
    description: (
    'Descrição da aplicação'),

    link: 'https://link da aplicação.com',
    picture: ' somente abre imagens já existentes '

   },

  function(response) {
  if (response && response.post_id) {

  alert('publicado');
  } else {
  alert('não publicado');

  }});

     };
    
     (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));


</script>

 .   

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!