botão personalizado de partilha do facebook

Quero partilhar os artigos do meu site no facebook (conteúdo,imagem,título)!

Mas o facebook não detecta a imagem correcta.

Neste caso, coloquei um URL de imagem estática.

Este é o meu código: 

<li>
    <a id="buttton"  href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo urlencode($url);?>&amp;p[images][0]=http://www.example.com/images/report/daily_report/KNDR/image(2).jpg" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600'); return false;">
        <img src="<?php echo base_url()?>media/images/share.png" alt=""/>
    </a>
</li>
Author: Mohammad Reza Saberi, 2014-02-26
Source

6 answers

Podes usar o SDK javascript do facebook. Primeiro adicione FB Js SDK ao seu código (por favor consulte https://developers.facebook.com/docs/javascript)

window.fbAsyncInit = function(){
FB.init({
    appId: 'xxxxx', status: true, cookie: true, xfbml: true }); 
};
(function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if(d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; 
    js.async = true;js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
    ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));
function postToFeed(title, desc, url, image){
var obj = {method: 'feed',link: url, picture: 'http://www.url.com/images/'+image,name: title,description: desc};
function callback(response){}
FB.ui(obj, callback);
}
Então, quando queres partilhar alguma coisa ... 
<a href="someurl.com/some-article" data-image="article-1.jpg" data-title="Article Title" data-desc="Some description for this article" class="btnShare">Share</a>

E, finalmente, o JS para lidar com o click: 

$('.btnShare').click(function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));

return false;
});
 37
Author: artuc, 2015-04-22 13:54:50

A melhor maneira é usar o seu código e, em seguida, armazenar a imagem em etiquetas OG na página a que você está ligando, em seguida, Facebook irá buscá-los.

<meta property="og:title" content="Facebook Open Graph Demo">
<meta property="og:image" content="http://example.com/main-image.png">
<meta property="og:site_name" content="Example Website">
<meta property="og:description" content="Here is a nice description">

Poderá encontrar documentação para as marcas OG e como as usar com os botões de partilha aqui

 8
Author: Adam, 2016-12-19 14:16:20

Bem, eu uso este método no meu site: 

<a class="share-btn" href="https://www.facebook.com/sharer/sharer.php?app_id=[your_app_id]&sdk=joey&u=[full_article_url]&display=popup&ref=plugin&src=share_button" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=580')">

Funciona perfeitamente.

 6
Author: Valery Levitsky, 2015-12-19 12:33:49

Esta solução está a usar o javascript para abrir uma nova janela quando um utilizador clica no seu botão de partilha personalizado.

HTML: 

<a href="#" onclick="share_fb('http://urlhere.com/test/55d7258b61707022e3050000');return false;" rel="nofollow" share_url="http://urlhere.com/test/55d7258b61707022e3050000" target="_blank">

  //using fontawesome
  <i class="uk-icon-facebook uk-float-left"></i>
    Share
</a>
E no seu ficheiro javascript. janela de notas.os parâmetros abertos são (url, título do diálogo, largura, altura) 
function share_fb(url) {
  window.open('https://www.facebook.com/sharer/sharer.php?u='+url,'facebook-share-dialog',"width=626, height=436")
}
 6
Author: Emil Reña Enriquez, 2017-08-08 11:58:45

Dado que estamos num contexto de código php e a variável $url contém a ligação que o Utilizador quer partilhar, pode tentar usar uma imagem personalizada: 

<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank"><img src="/img/facebook-share-button.png" /></a>

Ou isto para um texto simples: 

<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank">share</a>

Você também pode Estilo A ligação puramente com css.

O código html: 

<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank"></a>

O código css: 

.facebook-share-button {
    background-image: url("/img/facebook-share-button.png");
    display: inline-block;
    height: 32px;
    width: 32px;
}

.facebook-share-button:active,
.facebook-share-button:focus,
.facebook-share-button:hover {
    background-image: url("/img/facebook-share-button-hover.png");
}
 3
Author: Daishi, 2018-07-09 13:13:13

Inclua o botão facebook na página que deseja partilhar 

<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://trial.com/news.php?newsid=<?php echo $content; ?>"> 

                    <img src="http://trial/new_img/facebook_link.png" style=" border: 1px solid #d9d9d9; box-shadow: 0 4px 7px 0 #a5a5a5; padding: 5px;" title="facebook_link" alt="facebook_link" />

                    </a>
 0
Author: sabin, 2015-05-15 11:53:16