Como adicionar o botão de compartilhamento do Facebook no meu site?

100

Eu tenho esse código que deveria funcionar, mas não funciona. Se isso te ajudar de alguma forma, isso seria ótimo.

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {

        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

Quero adicionar o botão de compartilhamento do Facebook no meu site, que deve apenas postar o conteúdo do meu site na parede. quem quer compartilhar.

Pesquisei muito mas não consegui nada. Por favor, me ajude nisso.

Desde já, obrigado.

javascript facebook facebook-javascript-sdk share facebook-social-plugins Sahibjot Singh
fonte
2
sharelinkgenerator.com
Ronnie Royston

Respostas:

254

Você não precisa de todo esse código. Tudo que você precisa são as seguintes linhas:

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

A documentação pode ser encontrada em https://developers.facebook.com/docs/reference/plugins/share-links/

asifrc
fonte
7
Realmente não gosto dessa opção ... gostaria que houvesse um link estilizado, como o botão de tweet
Serj Sagan
104
Por que você não estiliza o link então? Eu definitivamente prefiro essa opção. Gosto de controlar a aparência dos meus designs.
sheriffderek
6
Além disso, essa maneira não adiciona o código de lixo eletrônico do Facebook, o que tornaria sua página lenta. Veja o plugin sharrre.com jquery, ele torna mais fácil personalizar a aparência e agrupar vários botões sociais "curtir" em um.
pixeline
3
Sim, você ainda pode usar links de compartilhamento simples. Além disso, verifique esta página simples para obter ajuda na criação de links simples para todos os seus sites populares de mídia social: sharelinkgenerator.com
pistol-pete
1
Nota importante: Esta ideia no celular abre o site do Facebook (não o aplicativo FB). Pequeno (ou grande) golpe.
Ezra Siton
26

Você pode fazer isso usando Javascript SDK assíncrono fornecido pelo Facebook

Dê uma olhada no seguinte código

Inicialização do SDK Javascript FB

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Nota: Lembre-se de substituir SEU ID do aplicativo pelo seu ID do aplicativo do Facebook. Se você não tem Facebook AppId e não sabe como criar, verifique este

Adicione a biblioteca JQuery, eu preferiria a Biblioteca do Google

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Adicionar caixa de diálogo de compartilhamento (você pode personalizar esta caixa de diálogo configurando parâmetros

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

Agora, finalmente, adicione o botão de imagem

<img src = "share_button.png" id = "share_button">

Para informações mais detalhadas. por favor clique aqui

Virat Gaywala - CSM
fonte
7
... compare isso com a inicialização do equivalente do Twitter. Nuts.
Michael
6
Sua abordagem requer um id de aplicativo, o que é uma dor de cabeça.
horseyguy de
Este ainda está funcionando como um encanto! Excelente trabalho!
Coding Freak
Agradável!! fácil de entender. Mas como sabemos se o usuário realmente compartilhou nosso conteúdo? PS: response.error_message aparecerá apenas se alguém usando seu aplicativo o tiver autenticado
Pearl,
14

Você pode ler mais sobre o botão de compartilhamento aqui no site de desenvolvedores do Facebook

Trabalhando JSFIDDLE

Também dê uma olhada no botão personalizado de compartilhamento do Facebook JSFIDDLE

Inclua o código do SDK do Facebook JavaScript logo após a <body>tag de abertura

<div id="fb-root"></div>
<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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

E coloque o código abaixo onde você quiser mostrar o botão Compartilhar do Facebook

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

insira a descrição da imagem aqui

Verifique o funcionamento do JSFIDDLE

Subodh Ghulaxe
fonte
8
É possível que este código não funcione mais? Nem mesmo em jsfiddle
erdomester
8
Sim, tendo sérios problemas para fazer isso funcionar sozinho ... Acabei com um div em branco.
Michael
@erdomester O violino não aparecerá no Chrome ou Firefox. Isso se deve à segurança do navegador, impedindo iframes em sandbox. Abrir o jsfiddle no Safari deve aparecer e, uma vez que você implementar fora de um jsfiddle, ele deve aparecer nos outros navegadores.
JisuKim82
4

Para compartilhar no Facebook com uma imagem sem API e usando um #link direto para uma subpágina, o truque era compartilhar a imagem como picture=

a variável mainUrlseriahttp://yoururl.com/ 

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});
tq
fonte
2

Compartilhe a caixa de diálogo sem exigir login do Facebook

Você pode disparar uma caixa de diálogo de compartilhamento usando a função FB.ui com o parâmetro do método de compartilhamento para compartilhar um link. Esta caixa de diálogo está disponível nos SDKs do Facebook para JavaScript, iOS e Android executando um redirecionamento completo para uma URL.

Você pode acionar esta chamada:

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

Você também pode incluir meta tags de gráfico aberto na página neste URL para personalizar a história que é compartilhada de volta com o Facebook.

Observe que response.error_message aparecerá apenas se alguém usando seu aplicativo tiver autenticado seu aplicativo com Login do Facebook.

Além disso, você pode compartilhar o link diretamente com a chamada, tendo JavaScript SDK do Facebook.

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

  • app_id => Identificador exclusivo do seu aplicativo. (Requeridos.)

  • redirect_uri => O URL para o qual redirecionar depois que uma pessoa clicar em um botão na caixa de diálogo. Obrigatório ao usar o redirecionamento de URL.

  • display => Determina como o diálogo é renderizado.

Se você estiver usando a implementação da caixa de diálogo de redirecionamento de URL, será uma exibição de página inteira, mostrada no Facebook.com. Este tipo de exibição é chamado de página. Se você estiver usando um de nossos SDKs para iOS ou Android para invocar a caixa de diálogo, isso é especificado automaticamente e escolhe um tipo de exibição apropriado para o dispositivo. Se você estiver usando o SDK do Facebook para JavaScript, o padrão será um tipo de iframe modal para as pessoas conectadas ao seu aplicativo ou assíncronas ao usar um jogo no Facebook.com e uma janela pop-up para todos os outros. Você também pode forçar o pop-up ou os tipos de página ao usar o SDK do Facebook para JavaScript, se necessário. Os aplicativos da web para celular sempre serão padronizados para o tipo de tela sensível ao toque. Parâmetros de compartilhamento

  • href => O link anexado a esta postagem. Obrigatório ao usar o compartilhamento de método. Inclua meta tags de gráfico aberto na página neste URL para personalizar a história que é compartilhada.
Somnath Muluk
fonte
1

Para o seu próprio servidor específico ou diferentes páginas e botão de imagem, você pode usar algo assim (somente PHP)

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

Não posso compartilhar o trecho com isso, mas você vai ter uma ideia ...

DagicCross
fonte