php 自定义 Facebook 分享按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22037021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
custom facebook share button
提问by Bahrami-Reza
I want to share my website articles on facebook (content,image,title)!
我想在 facebook 上分享我的网站文章（内容、图片、标题）！
but facebook doesn't detect correct image.
但 facebook 没有检测到正确的图像。
in this case I put an static image URL.
在这种情况下，我放置了一个静态图像 URL。
this is my code:
这是我的代码：
<li>
<a id="buttton" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo urlencode($url);?>&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>
回答by artuc
You can use facebook javascript sdk. First add FB Js SDK to your code (please refer to https://developers.facebook.com/docs/javascript)
您可以使用 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);
}
So when you want to share something
所以当你想分享一些东西时
<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>
And finally JS to handle click:
最后JS来处理点击：
$('.btnShare').click(function(){
elem = $(this);
postToFeed(elem.data('title'), elem.data('desc'), elem.prop('href'), elem.data('image'));
return false;
});
回答by Adam
The best way is to use your code and then store the image in OG tags in the page you are linking to, then Facebook will pick them up.
最好的方法是使用您的代码，然后将图像存储在您链接到的页面中的 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">
You can find documentation to OG tags and how to use them with share buttons here
您可以在此处找到 OG 标签的文档以及如何将它们与共享按钮一起使用
回答by Emil Re?a Enriquez
This solution is using javascript to open a new window when a user clicks on your custom share button.
当用户单击您的自定义共享按钮时，此解决方案使用 javascript 打开一个新窗口。
HTML:
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>
and in your javascript file. note window.open params are (url, dialogue title, width, height)
并在您的 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")
}
回答by Valery Levitsky
Well, I use this method on my site:
好吧，我在我的网站上使用这种方法：
<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')">
Works perfectly.
完美运行。
回答by Daishi
Given that we are in a php code context and the variable $urlcontains the link the user wants to share, you can try this to use a custom image :
鉴于我们在一个 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>
or this for just plain text :
或者这只是纯文本：
<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank">share</a>
You can also style the link purely with css.
您还可以纯粹使用 css 设置链接的样式。
The html code :
html代码：
<a class="facebook-share-button" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" target="_blank"></a>
The css code :
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");
}
回答by sabin
Include the facebook button on the page which you want to share
在您要分享的页面上包含 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>
回答by Nuno Alex
You can simply do something like...
你可以简单地做一些像......
...
<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>
