Facebook 分享按钮和自定义文本

有没有什么方法可以让 facebook 分享按钮在墙上或新闻提要上发布自定义文本？

199605 次浏览
小开

We use something like this [use in one line]:

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

You have several options:

  1. Use the standard FB Share button and set text via Open Graph API and meta tags on your page.
  2. Instead of Share, use FB.ui's stream.publish method, which let's you control the URL, title, caption, description and thumbnail at run-time.
  3. Or use http://www.facebook.com/sharer.php with appropriate parameters.
小开

you could combine AllisonC's idea with window.open function: http://www.w3schools.com/jsref/met_win_open.asp

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

And then on each link you call the openWin function with the right social net url.

小开

To give custom parameters to facebook share its better to give only the link and facebook gets its Title + Description + Picture automatically from the page that you are sharing. In order to "help" facebook API find those things you can put the following things in the header of the page that you are sharing:

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

Check here

If the page is not under your control use what AllisonC has shared above.

For popup modalview type behavior:

Use your own button/link/text and then you can use a modal view type of popup this way:

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

where twitterbtn-link and facebookbtn-link are both ids of anchors.

小开

This is a simple dialog feed that Facebook offer's. Read here for more detail link

小开

Try this site http://www.sharelinkgenerator.com/. Hope this helps.

小开

Youtube Uses this function for sharing

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

The following one is a dated solution where you can use this function derived from link provided by 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;
}

Or you can also use the latest FB.ui Function if using FB JavaScript SDK for more controlled callback function.

refer: 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.');
}
}
);
}
小开

You can customize Facebook share dialog box by using asynchronous JavaScript SDK provided by Facebook and setting up its parameter values

Have a look at the following code:

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

Before copying and pasting the below code you must first initialize the SDK and set up jQuery library. Please click here to know a step by step how to set information on the same.

小开

This is the current solution (Dec 2014) and works quite well. It features

  • open a popup window
  • self-contained snippet, doesn't require anything else
  • works with or without JS. If JS is disabled, the share window still opens, albeit not as a small popup.

<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 should be defined as the URL to share.


提交答案