Facebook分享按钮和自定义文字[关闭]


Answers:


94

我们使用以下内容[一行使用]:

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

4
您知道如何在弹出窗口或模式窗口中打开此链接吗?只是找不到一种有效的方法,它不像使用某些通用弹出窗口代码那么简单...
tvgemert

1
然后将答案放在最有效的位置。
Mateng 2012年

29
@tvgemert:尝试<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

完美,这也适用于hashbang网址!
dvtoever 2012年

73
这不再起作用。
Chuck Le Butt 2014年

30

为了给Facebook提供自定义参数,最好共享它的链接,然后Facebook 从您共享的页面自动获取其Title + Description + Picture。为了“帮助” 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。


如果URL相同,那么来自meta属性的数据是否被facebook缓存?还是可以在每个页面视图中放入例如单个POST数据?
Mateng 2012年

我没有明白你的意思。
ShayanK 2012年

我刚遇到这个。我的主页上有喜欢/共享代码,该代码设置为喜欢/共享与我的公司关联的Facebook页面。似乎忽略了我在页面上拥有的facebook meta标签。有人遇到这个问题吗?
克里斯·霍金斯

1
此方法似乎不再起作用。我认为实现自定义Facebook分享按钮(带有自己的文本,标题和图像)的唯一方法是使用Facebook SDK。
Ryan Coolwebs 2015年

很好的解决方案,使其也很现代,if( window.open(.....) ) event.preventDefault();而不是仅仅返回false;˙!-这样,它仅在打开窗口时阻止默认行为(链接打开)-在未打开窗口时提供回退...
jave.web,2016年

12

使用此功能源自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.');
            }
          }
        );
    }

此FB.ui也许是最可靠的方法,此外,您可以将其余脚本与页面底部的脚本一起加载,并将jquery变量/选择器作为值加载。感谢您发布此信息。
klewis

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

@Bravesh B在搜索与您链接的FB.ui相关的文档时,我找不到传递给FB.ui的参数,如图片,标题,说明。你能告诉我你在哪里找到的吗?
Ferex

@Ferex,您可以在这里找到这些参数developers.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B

1
自2017年4月18日起,Graph API 2.9及更高版本不再支持以下参数。对于2.8版及更低版本,参数将继续工作到2017
。– Goran Jakovljevic


6

您可以使用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库。请单击此处以逐步了解如何在其上设置信息。


3

这是当前的解决方案(2014年12月),效果很好。它具有

  • 打开一个弹出窗口
  • 独立的代码段,不需要其他任何内容
  • 可以使用JS,也可以不使用JS。如果禁用了JS,则共享窗口仍会打开,尽管弹出窗口很小。

<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应该定义为要共享的URL。


在我的页面以https ...开头的情况下,它不起作用?
d4v1dv00 2015年

1
这个答案现在无效,因为Facebook已停止支持共享器中的任何其他参数
-Vikrant


-2

您可以将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();
}

然后,在每个链接上,使用正确的社交网络URL调用openWin函数。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.