facebook帐号共享_如何与Facebook共享网页
facebook帐号共享
Facebook is a beast. That's the the only sentence I think of when thinking about all of it's features and developing with it. The Facebook Platform lives by the mantra: "Move fast, and break things." This saying arguably is the reason for Facebook's wild success and expansion. Facebook has immense depth and integration on the web, and it's imperative that you keep up with the services and sharing options the social platform offers, or you'll find yourself left in the dust playing catch-up. Their move fast mentality makes it real easy for you to unknowingly use legacy technology and APIs that are soon-to-be deprecated technology without knowing it.
Facebook是野兽。 这是我考虑所有功能并与之一起发展时唯一想到的一句话。 Facebook平台秉承这样的口号：“快速行动，打破常规”。 这句话可以说是Facebook取得巨大成功和扩展的原因。 Facebook在网络上具有广泛的深度和集成度，因此必须紧跟社交平台提供的服务和共享选项，否则您将陷入困境。 他们的快速行动心态使您在不知不觉间不经意地使用即将被弃用的旧技术和API变得非常容易。
This walk-through tutorial will explain the most basic sharing options Facebook provides for webpages to some slightly more complex ones even using "hackish" and non-traditional techniques.
本演练教程将向Facebook解释一些基本的共享选项，即使使用“ hackish”和非传统技术，这些选项也可以稍微复杂一些。
像Facebook提供的按钮社交插件 (Like Button Social Plugin Facebook Provided)
This is the easiest and probably the most common technique used. It's Facebook provided and is extremely simple and straight-foward to use. Just visit the social plugins URL located at "https://developers.facebook.com/docs/plugins/like-button/ and use the URL builder to create your Like Button. They provide code for HTML5, XFBML, IFRAME, and URL. If you're unsure which one to use, using the IFRAME snippet will be a sure use case, but I recommend using the HTML5 or XFBML method as they are slightly more customizable. Ultimately though, they all do the exact same thing.
这是使用的最简单而且可能是最常见的技术。 它由Facebook提供，使用起来非常简单直接。 只需访问位于“ https://developers.facebook.com/docs/plugins/like-button/上的社交插件URL，然后使用URL构建器来创建您的Like Button。它们提供HTML5，XFBML，IFRAME和URL的代码如果不确定使用哪一个，则可以使用IFRAME片段，但是我建议您使用HTML5或XFBML方法，因为它们的可定制性稍高一些，尽管最终它们都完全相同。
The Like Button builder lets you optionally choose if you features such as having Like, Send, Showing Friends Faces, and different layouts.
“喜欢按钮”构建器使您可以选择是否具有诸如“喜欢”，“发送”，“显示好友头像”和其他布局之类的功能。
例子： (Examples:)
These plugins face the same problem as the Twitter Plugins from the previous article on social sharing. To recap, the problem was that although they look familiar to users, they do have the chance of coming across as spammy and can easily pollute your webpage's design. Thankfully, there are other options available for this to consider.
这些插件面临与上一篇有关社交共享的文章中的Twitter插件相同的问题。 回顾一下，问题在于，尽管用户看上去很熟悉，但他们确实有机会被视为垃圾邮件，并且很容易污染您网页的设计。 值得庆幸的是，还有其他选项可供考虑。
分享对话框 (Share Dialog)
The Share Dialog is awesome and essentially has very similar (almost identical) functionality as a user sharing directly from the user's timeline.
“共享”对话框很棒，并且与用户直接从用户的时间轴进行共享的功能本质上非常相似（几乎相同）。
To access the current Share Dialog, visit these links:
要访问当前的共享对话框，请访问以下链接：
http://www.facebook.com/sharer/sharer.php
https://www.facebook.com/sharer/sharer.phpYou can style these links however you want with CSS. Here's some really awesome examples: http://codepen.io/search?q=facebook+share+button&limit=all&order=popularity&depth=everything. You'll also notice that I listed both the SSL Secure URL and the normal URL. The reason for this is Facebook's caching is aggressive, really, really, aggressive. Sometime's you'll run into issues with this. With my experience I provide this heads up:
您可以根据需要使用CSS设置样式。 以下是一些非常出色的示例： http : //codepen.io/search ?q=facebook+share+button&limit=all&order=popularity&depth= everything 。 您还会注意到，我同时列出了SSL安全URL和常规URL。 这是因为Facebook的缓存具有攻击性，而且确实非常激进。 有时您会遇到与此相关的问题。 根据我的经验，我提供一些提示：
HTTP or
HTTP或
HTTPS URL throughout the site consistency to ensure you don't come across any strange caching issues such as different OG information being shared.
HTTPS URL，以确保您不会遇到任何奇怪的缓存问题，例如共享不同的OG信息。
The Facebook Sharer only accepts one GET parameter, and that's u for the URL.
Facebook Sharer仅接受一个GET参数，即URL的u 。
http://www.facebook.com/sharer/sharer.php?u=https://scotch.io
https://www.facebook.com/sharer/sharer.php?u=https://scotch.ioIt's important to note that the old URL Facebook Sharer URL looks very similar to the new Sharer URL and should not be used and confused with. These deprecated URLs are:
重要的是要注意，旧的URL Facebook Sharer URL看起来与新的Sharer URL非常相似，不应将其使用和混淆。 这些不推荐使用的URL是：
http://www.facebook.com/sharer.php
https://www.facebook.com/sharer.phpThese URLs used to accept Parameters such as title and description, but they are no longer supported and should not be used.
这些URL用于接受诸如title和description参数，但不再受支持并且不应使用。
If you would like to make the Facebook Sharer a JavaScript Popup, you can use this snippet of code:
如果要使Facebook Sharer成为JavaScript弹出窗口，则可以使用以下代码段：
Share on Facebook
Here's it in action:
实际情况如下：
Share on FacebookLastly, everything that the Sharer uses is pulled in via Open Graph (OG) Meta Tags. You can view an infinite list of the metadata here (http://ogp.me/). As a bare minmium, I would use these tags in your head:
最后，共享器使用的所有内容都通过Open Graph（OG）元标记获取。 您可以在此处（http://ogp.me/）查看元数据的无限列表。 简而言之，我会在您的脑海中使用这些标签：
/* or this depending content type */
Facebook og:image uses two sizes "small" and "large". In most use cases this isn't even a question, use the larger image as it is proven to have higher click-through rates.
Facebook og：image使用“小”和“大”两个大小。 在大多数使用情况下，这甚至不是问题，请使用较大的图像，因为事实证明它具有较高的点击率。
You can debug this easily using the Facebook Debugger (URL). The debugger also clears cache and will tell you about missing tags that you might have.
您可以使用Facebook调试器（URL）轻松调试。 调试器还会清除缓存，并告知您可能缺少的标签。
Feed对话框 (Feed Dialog)
The Feed Dialog is a little more tricky than the other sharing options, but it gives you a lot more robust control on what to share. To put in perspective:
Feed对话框比其他共享选项要复杂一些，但是它使您可以更灵活地控制共享内容。 透视一下：
- Share Dialog: Dependent on Open Graph (OG) Meta tags 共享对话框：取决于开放图谱（OG）元标记
- Feed Dialog: Dependent on GET Parameters Feed对话框：取决于GET参数
It's not as black and white as this, however. I like to think to think of the Share Dialog as the equivalent of a Like Button URL endpoint. It pulls in all the data in can about a webpage (which can be explicitaly set with Meta Tags), while the Feed Dialog is intended to be used more directly within a Facebook App environment. However, if needed, who really cares, you can use it as an advanced sharing functionality for your webpages.
但是，它不是黑白的。 我想将“共享对话框”视为“赞按钮URL”端点的等效项。 它提取有关网页的所有数据罐中的数据（可以通过Meta标签明确设置），而Feed对话框旨在在Facebook App环境中更直接地使用。 但是，如果需要，谁会真正在乎，您可以将其用作网页的高级共享功能。
The Facebook Feed Dialog endpoint is here:
Facebook Feed对话框端点在这里：
https://www.facebook.com/dialog/feed
https://www.facebook.com/dialog/feed
You'll notice that it throws an error immediately. That's because the URL requires an Application ID and Redirect URI (specificed in the Facebook Application settings). Here's a full example:
您会注意到它立即引发错误。 这是因为URL需要一个应用程序ID和重定向URI（在Facebook应用程序设置中指定）。 这是一个完整的示例：
https://www.facebook.com/dialog/feed?app_id=1389892087910588&redirect_uri=https://scotch.io
https://www.facebook.com/dialog/feed?app_id=1389892087910588&redirect_uri=https://scotch.io
You'll notice from the link above that you're sharing "via Scotch Web Development", hence the whole App thing. This sharing option makes a lot of sense within a web app or app setting, but it's clear that there could be a use case on your websites for this. Below are the different parameters that the Feed Dialog. (Note only web-based, basic page and relevant parameters are mentioned. For a full-list see the Facebok Docs). Notice how the URL slowly progresses as you add the different parameters:
您将从上面的链接中注意到，您正在共享“通过Scotch Web开发”，因此是整个App。 在Web应用程序或应用程序设置中，此共享选项非常有意义，但很显然，您的网站上可能有一个用例。 以下是“提要”对话框中的不同参数。 （请注意，仅提及基于Web的基本页面和相关参数。有关完整列表，请参阅Facebok文档）。 请注意，当您添加不同的参数时，URL是如何缓慢进行的：
Link (Link)
The link attached to this post
这篇文章的链接
https://www.facebook.com/dialog/feed?
app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
https://www.facebook.com/dialog/feed？
app_id = 1389892087910588
＆redirect_uri = https：//scotch.io
＆link = https：//scotch.io
Picture (Picture)
The URL of a picture attached to this post. The picture must be at least 200px by 200px. See our documentation on maximizing distribution for media content for more information on sizes.
此帖子所附图片的网址。 图片必须至少为200px x 200px。 有关尺寸的更多信息，请参见我们的有关最大程度分配媒体内容的文档。
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
https://www.facebook.com/dialog/feed?app_id=1389892087910588
＆redirect_uri = https：//scotch.io
＆link = https：//scotch.io
＆picture = http：//placekitten.com/500/500
Caption (Caption)
The caption of the link (appears beneath the link name). If not specified, this field is automatically populated with the URL of the link.
链接的标题（显示在链接名称下方）。 如果未指定，则使用链接的URL自动填充此字段。
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
https://www.facebook.com/dialog/feed?app_id=1389892087910588
＆redirect_uri = https：//scotch.io
＆link = https：//scotch.io
＆picture = http：//placekitten.com/500/500
＆caption =此％20是％20the％20标题
Description (Description)
The description of the link (appears beneath the link caption). If not specified, this field is automatically populated by information scraped from the link, typically the title of the page.
链接的描述（显示在链接标题下方）。 如果未指定，此字段将自动使用从链接中抓取的信息（通常是页面标题）填充。
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
https://www.facebook.com/dialog/feed?app_id=1389892087910588
＆redirect_uri = https：//scotch.io
＆link = https：//scotch.io
＆picture = http：//placekitten.com/500/500
＆caption =此％20是％20the％20标题
＆description =此％20是％20the％20描述
Properties (Properties)
A JSON object of key/value pairs which will appear in the stream attachment beneath the description, with each property on its own line. Keys must be strings, and values can be either strings or JSON objects with the keys text and href.
键/值对的JSON对象，将出现在描述下方的流附件中，每个属性都位于其自己的行上。 键必须是字符串，值可以是具有键text和href的字符串或JSON对象。
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
&properties={text:'value1',key2:'value2'}
https://www.facebook.com/dialog/feed?app_id=1389892087910588
＆redirect_uri = https：//scotch.io
＆link = https：//scotch.io
＆picture = http：//placekitten.com/500/500
＆caption =此％20是％20the％20标题
＆description =此％20是％20the％20描述
＆properties = {文本：'value1'，key2：'value2'}
Actions (Actions)
A JSON array containing a single object describing the action link which will appear next to the 'Comment' and 'Like' link under posts. The contained object must have the keys name and link.
一个JSON数组，其中包含描述操作链接的单个对象，该对象将显示在帖子下的“评论”和“喜欢”链接旁边。 包含的对象必须具有键名称和链接。
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
&properties={text:'value1',key2:'value2'}
&actions={name:'I LOVE SCOTCH',link:'https://scotch.io'}
https://www.facebook.com/dialog/feed?app_id=1389892087910588
＆redirect_uri = https：//scotch.io
＆link = https：//scotch.io
＆picture = http：//placekitten.com/500/500
＆caption =此％20是％20the％20标题
＆description =此％20是％20the％20描述
＆properties = {文本：'value1'，key2：'value2'}
＆actions = {名称：“我爱scoot”，链接：“ https://scotch.io”}
To see this example, share this privately on your wall and look at what's next to the comment button.
要查看此示例，请在墙上私下分享此示例，并查看评论按钮旁边的内容。
These examples really spell out the robustness of the Feed Dialog. It's important to note that this is makes more sense to use within a Facebook App after a user has Logged in with Facebook, but you can hack/abuse the functionality for some cool share functionality as shown above. I'm unsure if this counts toward like count like Facebook Shares and Facebook Likes.
这些示例确实说明了Feed对话框的强大功能。 需要注意的重要一点是，在用户使用Facebook登录后，在Facebook App中使用它是更有意义的，但是您可以破解/滥用该功能，以实现上述一些很酷的共享功能。 我不确定这是否可以计入Facebook Shares和Facebook Likes之类的计数。
结语 (Wrap-Up)
So what should you use? It all really depends. I choose to completely avoid the default Facebook Like Button at all costs for purely design purposes, but it can definitely be used gracefully. The Facebook Sharer URL is Godsend, and understanding OG tags entirely can give you a huge web development advantage. The Feed Dialog is awesome, but should be used correctly. Use whatever fits you best! Feel free to post in the comments creative sites or ways that you've used sharing with Facebook.
那你应该用什么呢？ 这真的取决于。 我选择完全出于纯粹的设计目的而完全避免使用默认的Facebook Like Button，但是绝对可以优雅地使用它。 Facebook Sharer URL是天赐之物，完全了解OG标签可以为您带来巨大的Web开发优势。 Feed对话框很棒，但是应该正确使用。 使用最适合您的东西！ 随时在评论创意网站或您与Facebook分享的方式中发表评论。
翻译自: https://scotch.io/tutorials/how-to-share-webpages-with-facebook
facebook帐号共享