Botão de compartilhamento do Facebook e texto personalizado [fechado]

93

Existe alguma maneira de fazer botão de compartilhamento do Facebook que posta texto personalizado no mural ou feed de notícias?

Neir0
fonte
possível duplicata do campo Personalizar mensagem no Facebook Share
Mike Lyons

Respostas:

94

Usamos algo assim [use em uma linha]:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>
AllisonC
fonte
4
Você sabe como fazer este link abrir em uma janela pop-up ou modal? Não consigo encontrar um método que funcione, não é tão simples quanto usar algum código de janela pop-up genérico ...
tvgemert 01 de
1
Mais eficaz do que a resposta no topo.
Mateng
29
@tvgemert: Try <a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer/sharer.php?u=YOUR_URL">Facebook</a>etc.
Mateng
Perfeito, isso também funciona para urls hashbang!
dvtoever
73
Isso não funciona mais.
Chuck Le Butt
30

Para dar parâmetros personalizados ao Facebook, é melhor fornecer apenas o link e o Facebook recebe seu Título + Descrição + Imagem automaticamente da página que você está compartilhando. Para "ajudar" a API do Facebook a encontrar essas coisas, você pode colocar os seguintes itens no cabeçalho da página que está compartilhando:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Verifique aqui

Se a página não estiver sob seu controle, use o que AllisonC compartilhou acima.

Para comportamento do tipo pop-up modalview:

Use seu próprio botão / link / texto e, em seguida, você pode usar um tipo de visualização modal de pop-up desta forma:

<script type= 'text/javascript'>
$('#twitterbtn-link,#facebookbtn-link').click(function(event) {
var width  = 575,
    height = 400,
    left   = ($(window).width()  - width)  / 2,
    top    = ($(window).height() - height) / 2,
    url    = this.href,
    opts   = 'status=1' +
             ',width='  + width  +
             ',height=' + height +
             ',top='    + top    +
             ',left='   + left;

window.open(url, 'twitter', opts);

return false;
});
</script>

onde twitterbtn-link e facebookbtn-link são ids de âncoras.

ShayanK
fonte
Se os URLs forem idênticos, os dados das propriedades meta estão sendo armazenados em cache pelo Facebook? Ou posso inserir, por exemplo, dados POST individuais em cada exibição de página?
Mateng
Eu não entendi o que você quis dizer com isso.
ShayanK de
Eu acabei de encontrar isso. Tenho um código de curtir / compartilhar em minha página inicial que está configurado para curtir / compartilhar a página do Facebook associada ao meu negócio. Parece estar ignorando as metatags do Facebook que tenho na página. Alguém se deparou com esse problema?
Chris Hawkins
1
Este método parece não funcionar mais. Acho que a única maneira de obter um botão de compartilhamento personalizado do Facebook (com seu próprio texto, título e imagem) é usar o SDK do Facebook.
Ryan Coolwebs
Ótima solução, para torná-lo também moderno, faça ao if( window.open(.....) ) event.preventDefault();invés de apenas `return false; ˙! - dessa forma, ele apenas evita o comportamento padrão (link aberto) quando a janela foi aberta - fornece fallback quando não era ...
jave.web
12

use esta função derivada do link fornecido por IJas

function openFbPopUp() {
    var fburl = '';
    var fbimgurl = 'http://';
    var fbtitle = 'Your title';
    var fbsummary = "your description";
    var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
    window.open(
      sharerURL,
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return  false;
}

Ou você também pode usar a função FB.ui mais recente se estiver usando FB JavaScript SDK para uma função de retorno de chamada mais controlada.

consulte: FB.ui

    function openFbPopUp() {
        FB.ui(
          {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'https://developers.facebook.com/docs/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
          },
          function(response) {
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
          }
        );
    }
Bhavesh B
fonte
este FB.ui é talvez a abordagem mais confiável, além disso, você pode carregar este script na parte inferior da sua página com o resto do seu javascript e carregar variáveis ​​/ seletores jquery como valores. Obrigado por postar isso.
klewis
@blackhawk ... mas o FB.ui também requer app_id - nem sempre é uma opção ... :)
jave.web
@Bravesh B Pesquisando a documentação relacionada ao FB.ui que você vinculou, não encontrei os parâmetros que você passa para o FB.ui como imagem, legenda, descrição. Você poderia me dizer onde você os encontrou?
Ferex
@Ferex você pode encontrar os parâmetros aqui developers.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B
1
A partir de 18 de abril de 2017, os parâmetros a seguir não são mais compatíveis com o Graph API versões 2.9 e superior. Para as versões 2.8 e inferiores, os parâmetros continuarão funcionando até 17 de julho de 2017.
Goran Jakovljevic,
9

Você tem várias opções:

  1. Use o botão FB Share padrão e defina o texto por meio da API Open Graph e metatags em sua página.
  2. Em vez de Share, uso FB.ui método stream.publish 's, que lhe permite controlar o URL, título, subtítulo, descrição e miniaturas em tempo de execução.
  3. Ou use http://www.facebook.com/sharer.php com os parâmetros apropriados.
Kon
fonte
2
Você pode elaborar sobre o último? Quais são esses parâmetros?
Jeroen Vannevel
6

Você pode personalizar a caixa de diálogo de compartilhamento do Facebook usando JavaScript SDK assíncrono fornecido pelo Facebook e configurando seus valores de parâmetro

Dê uma olhada no seguinte código:

<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: 'URL which you would like to share ',
          picture: ‘URL of the image which is going to appear as thumbnail image in share dialogbox’,
          caption: 'Caption like which appear as title of the dialog box',
          description: 'Small description of the post',
          message: ''
        }
      );
    });
  });
</script>

Antes de copiar e colar o código abaixo, você deve primeiro inicializar o SDK e configurar a biblioteca jQuery. Por favor clique aqui para conhecer um passo a passo como informação conjunto sobre o mesmo.

Virat Gaywala - CSM
fonte
3

Esta é a solução atual (dez 2014) e funciona muito bem. Possui

  • abre uma janela pop-up
  • snippet autocontido, não requer mais nada
  • funciona com ou sem JS. Se JS estiver desabilitado, a janela de compartilhamento ainda abre, embora não como um pequeno pop-up.

<a onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/sharer/sharer.php?u=href=$url&display=popup&ref=plugin" target="_window"><img src='/_img/icons/facebook.png' /></a>

$ url var deve ser definido como o URL a ser compartilhado.

Aleemb
fonte
não funciona no meu caso em que minha página começa com https ...?
d4v1dv00
1
Esta resposta é inválida agora, pois o Facebook parou de oferecer suporte a qualquer outro parâmetro no compartilhador
Vikrant,
0

Este é um feed de diálogo simples que o Facebook oferece. Leia aqui para obter mais detalhes no link

Jogador mundial
fonte
-2

você pode combinar a ideia de AllisonC com a window.openfunção: http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

E então, em cada link, você chama a função openWin com o url de rede social correto.

Txugo
fonte
-3

Experimente este site http://www.sharelinkgenerator.com/ . Espero que isto ajude.

Ijas Ameenudeen
fonte
3
Isso não resolve o problema em que as pessoas procuram títulos / descrições personalizados
Eddie
com a sua solução não é possível colocar texto personalizado com o facebook dê outra solução
RaviPatidar