自定义 Facebook 分享按钮答案

【问题标题】：custom facebook share button自定义 Facebook 分享按钮
【发布时间】：2014-03-29 00:33:35
【问题描述】：

我想在 facebook 上分享我的网站文章（内容、图片、标题）！

但是 facebook 没有检测到正确的图像。

在这种情况下，我放置了一个静态图片 URL。

这是我的代码：

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

【问题讨论】：

facebook 不分享我展示的图片！

标签： php facebook share

【解决方案1】：

你可以简单地做类似...

...
<head>
...
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id', // you need to create an facebook app
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.3'
    });
  };
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
</head>
<body>
...
<button id="share-btn"></button>
<!-- load jquery -->
<script>
    $('#share-btn').on('click', function () {
        FB.ui({
            method: 'share',
            href: location.href, // Current url
        }, function (response) { });
    });
</script>
</body>

【讨论】：

【解决方案2】：

鉴于我们在 php 代码上下文中并且变量 $url 包含用户想要共享的链接，您可以尝试使用自定义图像：

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

或者这只是纯文本：

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

您也可以纯粹使用 css 设置链接样式。

html代码：

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

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

【讨论】：

好答案，我会添加一个 target="_blank" 或者在分享后关闭分享窗口

【解决方案3】：

当用户单击您的自定义共享按钮时，此解决方案使用 javascript 打开一个新窗口。

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>

在您的 javascript 文件中。注意 window.open 参数是（url、对话标题、宽度、高度）

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

【讨论】：

像魅力一样工作

【解决方案4】：

最好的方法是使用您的代码，然后将图像存储在您链接到的页面中的 OG 标签中，然后 Facebook 会提取它们。

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

您可以找到 OG 标签的文档以及如何通过分享按钮使用它们 here

【讨论】：

可以发个链接给我看看吗？
我按照你说的添加了所有内容，但是直到我添加了@artuc 提供的解决方案，它才起作用。该项目位于本地主机上，因此我现在无法为您提供网址。
它不能在本地主机上工作，因为当你分享链接时，facebooks 自己的服务器会检查元标记的 url。

【解决方案5】：

好吧，我在我的网站上使用这种方法：

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

完美运行。

【讨论】：

【解决方案6】：

在您要分享的页面上添加 facebook 按钮

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

【讨论】：

这是一个依赖于浏览器的解决方案，如果用户的浏览器设置被设置为在新标签页中打开链接，那么它就不可能作为新窗口弹出。除非你为它创建一个 js 函数。 stackoverflow.com/a/32158402/1418771

【解决方案7】：

您可以使用 facebook javascript sdk。首先将 FB Js SDK 添加到您的代码中（请参考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);
}

所以当你想分享一些东西时

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

最后是 JS 来处理点击：

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

return false;
});

【讨论】：

这不起作用，你得到 postToFeed 是未定义的。
效果很好，你确定你添加了 postToFeed 功能吗？你能提供你的代码@jetlej
太棒了！！。这行得通。我需要动态更改数据，这就是解决方案
是的@DragosRizescu
我收到了错误elem is undefined。需要把第二行改成var elem = $(this);