Custom facebook share button

Question

Custom facebook share button

Navigation

#1 by (0 votes)

0

Good afternoon. I'm having trouble creating a facebook share button that is customized. I would like to help me make one that works the way I like it. There are some things I wanted to work differently than what I'm using.

For example: click here

In the link above is my site, we can see there the button "Facebook", which when we click it opens another page and we can finish the share.

But I wanted it when I clicked on the facebook button it opened a screen (popup, modal), and there was the data of the news correctly. In the current button the image that facebook recognizes is always the same, and not according to the news.

If it is not clear what I want to learn how to do it, go to the link for a walmart product (any product on their site, the left side of the product is the facebook button, clicking here will open the share button )

On the walmart website, clicking on the SHARE button opens the modal and there it contains the correct photo of the product, its name, description, and so on.

The code for my current button:

<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>

Button:

<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>

Additional information: the site already has the og: image tag, and so on ... even so the script does not bring the image of the news. Also I already entered the OG Sharing Debbuger of facebook, presents following message: Image Unavailable Provided og: image, link could not be downloaded because it exceeded the maximum allowed size of 8Mb or your server was too slow to respond.

The problem is that the image is not more than 8mb, and the path they specify in the error is not correct either.

javascript facebook

asked by anonymous 05.10.2016 / 22:10

1 answer

NullPointerException when doing query in SQLite Websocket angular and php

score 0 · Answer 1

Good evening, you can take the following approach:

Create a javascript function that receives the news url and assigns the function call on the custom button.

function shareFacebook(url){

        var w = 630;
        var h = 360;

        var left = screen.width/2 - 630/2;
        var top = screen.height/2 - 360/2;

        window.open('http://www.facebook.com/sharer.php?u='+url, 'Compartilhar no facebook', 'toolbar=no, location=no, directories=no, status=no, ' + 'menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width='+w+ ', height=' + h + ', top=' + top + ', left=' + left);
 }

Example call:

<button onclick="shareFacebook('http://google.com.br');">Compartilhar no facebook</button>