Boa tarde. Estou com problema para criar um botão de compartilhar do facebook que seja personalizado. Gostaria q me ajudassem a fazer um que funcionasse da forma q eu gostaria. Existe algumas coisas q eu queria que funcionassem diferente do que o que estou usando.
Por exemplo: clique aqui
No link acima está meu site, podemos ver ali o botão "Facebook", que quando clicamos ele abre uma outra página e conseguimos finalizar o compartilhamento.
Porém eu queria que quando eu clicasse no botão do facebook ele abrisse uma tela (popup, modal), e ali estivessem os dados da noticia corretamente. No botão atual a imagem que o facebook reconhece é sempre a mesma, e não de acordo com a notícia.
Caso não tenha ficado muito claro o que quero aprender a fazer, acesse o link de um produto do walmart (qualquer produto do site deles, lado esquerdo do produto está o botão de facebook, quando clicar ali vai abrir o botão de compartilhar)
No site do walmart, ao clicar no botão COMPARTILHAR ele abre a modal e lá contem a foto correta do produto, o nome dele, descrição, e etc.
O código do meu botão atual:
<script>(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 = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Botão:
<div class="fb-share-button" data-href="https://www.hercontabil.com.br/noticias/<%# Eval("Noticia_Pagina")%>" data-mobile-iframe="true"><a class="link_rede_social facebook fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.hercontabil.com.br/noticias/<%# Eval("Noticia_Pagina")%>">Facebook</a></div>
Informações adicionais: o site já possui a tag og:image, e etc... mesmo assim o script não traz a imagem da noticia. Também já entrei no OG Sharing Debbuger do facebook, apresenta seguinte mensagem: Image Unavailable Provided og:image, http://www.hercontabil.com.br/sistema/noticias/1noticia_teste.png could not be downloaded because it exceeded the maximum allowed sized of 8Mb or your server was too slow to respond.
O problema é que a imagem não tem mais de 8mb, e o caminho q eles especificam no erro não está correto tbm.