php - redes - botón de compartir de Facebook personalizado

plugin compartir facebook

Question

¡Quiero compartir los artículos de mi sitio web en Facebook (contenido, imagen, título)!

Pero Facebook no detecta la imagen correcta.

En este caso pongo una URL de imagen estática.

este es mi codigo

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

Answer 1

Bueno, yo uso este método en mi sitio:

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

Answer 2

Dado que estamos en un contexto de código php y la variable $url contiene el enlace que el usuario desea compartir, puede intentar esto para usar una imagen 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>

o esto solo para texto plano:

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

También puede diseñar el enlace puramente con css.

El código html:

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

El 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");
}

Answer 3

Esta solución utiliza javascript para abrir una nueva ventana cuando un usuario hace clic en el botón de compartir 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>

y en tu archivo javascript. note window.open params are (url, título de diálogo, ancho, alto)

function share_fb(url) {
  window.open(''https://www.facebook.com/sharer/sharer.php?u=''+url,''facebook-share-dialog'',"width=626, height=436")
}

Answer 4

Incluye el botón de facebook en la página que quieres compartir.

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

Answer 5

La mejor manera es usar su código y luego almacenar la imagen en etiquetas OG en la página a la que se está vinculando, luego Facebook las recogerá.

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

Puede encontrar documentación para las etiquetas OG y cómo usarlas con los botones de compartir here

Answer 6

Puedes usar facebook javascript sdk. Primero agregue FB Js SDK a su código (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);
}

Así que cuando quieras compartir algo.

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

Y finalmente JS para manejar clic:

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

return false;
});