Facebook分享按钮和自定义文本

Question

有没有办法制作Facebook分享按钮，可以在墙上或新闻动态中发布自定义文本？

- Neir0

---

可能是自定义Facebook分享消息字段的重复问题。 - Mike Lyons

Answer 1

我们使用类似以下的方式[一行内使用]：

<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

---

你知道如何让这个链接在弹出窗口或模态窗口中打开吗？我找不到可行的方法，这并不像使用一些通用的弹出窗口代码那么简单... - tvgemert

比上面的答案更有效。 - Mateng

尝试使用<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>等内容。 - Mateng

@Mateng，有没有一种方法可以使用类似于您的代码的方式在一个轻盒子/彩色框中打开它，而不是在“新窗口”中打开？ - hockey2112

这个不再起作用了。 - Chuck Le Butt

Answer 2

为了给Facebook分享提供自定义参数，最好只提供链接，Facebook可以从您分享的页面中自动获取标题、描述和图片。为了“帮助” Facebook API 找到这些内容，您可以将以下内容放在要分享的页面的标题中：

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

点击这里

如果页面不在你的控制范围内，那么请使用上面AllisonC分享的方法。

对于弹出模态视图类型的行为：

使用自己的按钮/链接/文本，然后可以通过以下方式使用模态视图类型的弹出窗口：

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

其中 twitterbtn-link 和 facebookbtn-link 都是锚点的 ID。

- ShayanK

---

如果URL相同，Facebook是否会缓存元属性数据？或者我是否可以在每次页面访问时放入单独的POST数据？ - Mateng

我不明白你的意思。 - ShayanK

我刚刚遇到了这个问题。我的主页上有“喜欢/分享”代码，设置为喜欢/分享与我的业务相关联的Facebook页面。它似乎忽略了我在页面上设置的Facebook元标记。有人遇到过这个问题吗？ - Chris Hawkins

这种方法似乎不再起作用了。我认为实现自定义的Facebook分享按钮（包括您自己的文本、标题和图像）的唯一方法是使用Facebook SDK。 - Ryan Coolwebs

很好的解决方案，如果要使它更现代化，请使用if( window.open(.....) ) event.preventDefault();，而不是只用return false;。这样当打开窗口时，它只会防止默认行为（链接打开） - 并在没有打开窗口的情况下提供回退。 - jave.web

Answer 3

Youtube使用此函数来共享

https://www.facebook.com/dialog/share?app_id=87741124305&href=https://youtube.com/watch?v=3hxE7Af98AI&feature=share&display=popup

下面是一种过时的解决方案，您可以使用从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;
}

如果使用FB JavaScript SDK，您也可以使用最新的FB.ui函数来获得更加可控的回调函数。

参考：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

---

这个FB.ui可能是最可靠的方法，而且你可以将这个脚本与其它JavaScript一起加载在页面底部，并将jQuery变量/选择器作为值加载。感谢您发布这个。 - klewis

@blackhawk ...但是FB.ui也需要app_id - 这并不总是一个选项... :) - jave.web

@Bravesh B，我查看了你提供的与FB.ui相关的文档，但是没有找到你在FB.ui中传递的参数，例如picture、caption和description。请问你是从哪里找到这些参数的？ - Ferex

@Ferex，你可以在这里找到参数 https://developers.facebook.com/docs/sharing/reference/feed-dialog - Bhavesh B

截至2017年4月18日，Graph API版本2.9及更高版本不再支持以下参数。对于2.8及以下版本，这些参数将继续工作直到2017年7月17日。 - Goran Jakovljevic

@BhaveshB 我使用了你的代码，但只想分享描述而不是它的工作原理，请在这里检查一下： https://stackoverflow.com/q/57680369/10748606 - Rakesh Donga

Answer 4

您有几个选项：

1. 使用标准的FB分享按钮，并通过Open Graph API和页面上的meta标签设置文本。
2. 不使用分享，而是使用FB.ui的stream.publish方法，该方法允许您在运行时控制URL、标题、字幕、描述和缩略图。
3. 或者使用http://www.facebook.com/sharer.php和适当的参数。

- Kon

---

你能详细说明后者吗？这些参数是什么？ - Jeroen Vannevel

Answer 5

您可以使用 Facebook 提供的异步 JavaScript SDK 并设置其参数值来自定义 Facebook 分享对话框。

请查看以下代码：

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

在复制和粘贴以下代码之前，您必须首先初始化SDK并设置jQuery库。请单击此处了解逐步设置信息的方法。

- Virat Gaywala - CSM

Answer 6

这是当前的解决方案（2014年12月），并且效果相当不错。它具有以下特点：

• 打开弹出窗口
• 自包含的代码片段，不需要任何其他内容
• 可以使用或不使用JS。如果禁用JS，则共享窗口仍会打开，但不会作为小弹出窗口。

<a onclick="return !window.open(this.href, '分享到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变量应定义为要共享的URL。

- aleemb

---

它在我的情况下不起作用，因为我的页面以https开头...？ - d4v1dv00

这个答案现在已经无效了，因为Facebook已经停止支持sharer中的任何其他参数。 - Vikrant

Answer 7

这是 Facebook 提供的一个简单的对话框反馈。 点击此处了解更多详情 link

- World Gamer

Answer 8

您可以将AllisonC的想法与window.open函数结合起来使用： http://www.w3schools.com/jsref/met_win_open.asp

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

然后在每个链接上，您调用openWin函数并传入正确的社交网络URL。

- Txugo

Answer 9

试试这个网站http://www.sharelinkgenerator.com/。希望能帮到你。

- Ijas Ameenudeen

---

这并不能解决那些需要自定义标题/描述的人所面临的问题。 - Eddie

您的解决方案无法在 Facebook 上放置自定义文本，请提供另一种解决方案。 - RaviPatidar