Facebook custom share button

Asked

Viewed 1,303 times

0

Good afternoon. I’m having trouble creating a facebook share button that’s personalized. I’d like you to help me make one that works the way I’d like. There are some things I wish would work differently than what I’m wearing.

For example: click here

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

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

If it’s not clear what I want to learn to do, go to the link of a product from Walmart (any product from their site, left side of the product is the facebook button, when you click there will open the share button)

On the site of Walmart, when clicking on the SHARE button it opens the modal and there it contains the correct photo of the product, its name, description, and etc.

The code of 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>

Knob:

<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 etc... even so the script does not bring the news image. I’ve also entered the OG Sharing Debbuger facebook, presents following message: 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.

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

javascript web-application facebook

  • Your website uses ASP or PHP?

  • Are you using the facebook API neh? From the address, it seems that the system is skipping a bar after the number 1 (which I imagine is the page). Probably the error is happening because it is picking up the wrong address. I had a certain difficulty to make it work once on a blog. On the button try to add a bar after the page variable.

1 answer

1

Good evening, you can take the following approach:

Create a javascript function that receives the news url and assign 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);
 }

Call example:

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

Browser other questions tagged javascript web-application facebook

You are not signed in. Login or sign up in order to post.