Stack溢出上的Facebook“共享"按钮如何工作? [英] How does the Facebook 'share' button on Stack overflow work?

问题描述

我希望将社交图标添加到我们的网站，以使客户能够喜欢"，发布和分享其Facebook和Twitter个人资料上的内容.我已经注意到，在此框的左侧，facebook和twitter图标确实确实做到了我要完成的目标，但我对如何做到这一点并不熟悉.在源代码中，有JS引用:

I am looking to add social icons to our site, giving customers the ability to "like", tweet and share content on their facebook and twitter profiles. I have noticed to the left of this box, the facebook and twitter icons do exactly what I am trying to accomplish but I am not familiar with how to do this. Looking at the source code, there are JS references to:

<script type="text/javascript">
  StackExchange.ready(function() {
    var shareUrl = "http%3a%2f%2fstackoverflow.com%2fq%2f7505636%2f337690";
    var shareMsg = "Advice+integrating+Facebook+%27share%27+and+link%2fimage+capabilities+with+our+site";   
    StackExchange.share.facebook($("#fb-share-7505636"), shareUrl, shareMsg);
    StackExchange.share.twitter($("#twitter-share-7505636"), shareUrl, shareMsg);
});
</script>

我们的网站是这样工作的:尽管任何人都可以随时访问主站点，但是个人可以使用自己的唯一URL来注册代表，该URL充当引荐来源，以给予奖励信用".我已经审查了Facebook开发者网站，说实话，我有点不知所措.我想让我们的会员能够从其仪表板中单击Facebook图标，提示他们在墙上贴上设置好的图像，设置的标题和说明.我已经在文档中阅读了通过在头部设置元标记来完成此操作，但这对我的网站似乎并不重要(或者我显然做错了).

Our site works this way: While anybody can visit the primary site at any time, individuals can sign up as representatives with their own unique URL that acts as a referrer to give 'credit' on rewards. I have reviewed the facebook developer site and to be honest I am slightly overwhelmed. I want to give our members the ability to click a Facebook icon from within their dashboard, prompting them to post on their wall with a set image, set title, and description. I have read in the documentation this is done by setting meta tags in the head but it does not seem to matter for my site (or I am clearly doing it wrong).

如果Facebook正在寻找的URL(共享URL)位于受密码保护的页面或网站的某个区域(该区域不允许基于丢失的PHP SESSION变量的内容)后面，该怎么办?

What if the URL facebook is looking for (share URL) is behind a password protected page or an area of the site which would not allow content based on a missing PHP SESSION variable?

我在网上也看到很多内容，它们说我必须集成Facebook JS SDK，然后继续讨论在墙上写的身份验证/权限等.是的，指向左侧的链接没有要求获得除1)登录FB帐户，2)在用户墙上张贴的权限以外的任何其他操作的权限.此网站是一个完美的例子

I have also seen a lot on the net which says I have to integrate the Facebook JS SDK but then goes on to talk about authentication/permission to write on walls, etc. Yes the link to the left does not ask for permission to do anything other than to 1) log into the FB account, 2) post on the user's wall. This site is a perfect example

上面的链接很棒，但是它假设我需要授权一个本网站上没有的共享".

The link above is great but it assumes I need to authorize a 'share' which does not occur on this site.

推荐答案

单击共享按钮时，您在facebook.com上调用一个脚本，该脚本随后将依次访问查询字符串中指向的页面(?u =xxxxxx).

When you click on the share button, you call a script on facebook.com that will then in turn access the page pointed to in the querystring (?u=xxxxxx).

Facebook将解析该页面并获取其找到的前几张图像，以及页面中的描述和标题.那就是向您显示的内容，并允许您添加一些其他文本(以及编辑标题/说明/并选择其他图像).

Facebook will parse that page and grab the first few images it finds, a description and title from the page. That is what it shows to you and allows you to add some additional text (as well as edit the title/description/and choose different images).

如果该页面包含facebook要求您添加到页面的特定元标记，则它们将使用这些标记填充标题/描述/图像.这使网页作者可以控制其页面在Facebook feed中的显示方式(尽管用户仍可以在发布前对其进行编辑).这些meta标签需要在该特定页面中才能被Facebook使用.

If that page contains the specific meta tags that facebook asks you to add to the page, then they'll use those to populate the title/description/image. This allows the webpage author to control how their page shows up in a facebook feed (although the user could still edit it before posting). These meta tags would need to be in that particular page to be used by facebook.

如果facebook由于受密码保护等原因而无法访问该页面-那么它将无法解析meta标签，然后仅向用户显示URL作为标题，没有描述和缩略图.

If facebook cannot access the page because it's password protected, etc. - then it cannot parse the meta tags and will then just show the user the URL as the title with no description and thumbnail.

这篇关于Stack溢出上的Facebook“共享"按钮如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！