Facebook Sharer如何在共享我的URL时选择图像和其他元数据？

作者: ❀⚘粉༵红༵回༵忆༵⚘❀
发布时间: 2024-12-24 09:42:17 (1月前)
转自：

9 条回复

0#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 当您分享Facebook时，您必须将html添加到head部分的下一个元标记中： </p> <pre class="lang-html prettyprint-override"> <code> <meta property="og:title" content="title" /> <meta property="og:description" content="description" /> <meta property="og:image" content="thumbnail_image" /> </code> </pre> <P> 就是这样！ </p> <P> 根据FB告诉你的内容，添加按钮。 </p> <P> 您需要的所有信息都在 <a href="http://www.facebook.com/share/" rel="noreferrer"> www.facebook.com/share/ </A> </p> </DIV>

编辑
1#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 截至2013年，如果你使用facebook.com/sharer.php(PHP），你可以简单地制作任何按钮/链接： </p> <pre> <code> <a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a> </code> </pre> <P> 链接查询参数： </p> <pre> <code> p[title] = Define a page title p[summary] = An URL description, most likely describing the contents of the page p[url] = The absolute URL for the page you're sharing p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook </code> </pre> <P> 这很简单：你不需要任何js或其他设置。只是一个HTML原始链接。以您想要的任何方式设置A标签的样式。 </p> </DIV>

编辑
2#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我遇到了这个问题并用manuel-84的建议修复了它。使用400x400px图像效果很好，而我的小图像从未出现在共享器中。 </p> <P> 请注意，Facebook建议至少200像素的方形图像作为og：image标记： <a href="https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags" rel="nofollow"> https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags </A> </p> </DIV>

编辑
3#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这对我有用：我在标签后面的页面上放置了所需的缩略图，使其太小而无法看到.. </p> <pre class="lang-html prettyprint-override"> <code> <img src="imagename.jpg" width="1" height="1" /> </code> </pre> <P> 我没有用高度0和宽度0测试它，但它可能仍然可以工作..这不保证用户将选择此图像.. </p> <P> 此外，Facebook似乎在您的页面上缓存缩略图，并且不会总是检查它是否为新的..尝试将此添加到您网站上的另一个页面，您将看到它的工作原理。 </p> </DIV>

编辑
4#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H3> 当我的页面被共享时，如何告诉Facebook使用哪个图像？ </H3> <P> Facebook有一套 <a href="https://developers.facebook.com/docs/opengraphprotocol/" rel="noreferrer"> 开放图元标记 </A> 它看起来决定显示哪个图像。 </p> <P> Facebook图像的关键是： </p> <pre class="lang-html prettyprint-override"> <code> <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> </code> </pre> <P> 它应该出现在 <code> <head></head> </code> 标记在页面顶部。 </p> <P> 如果这些标签不存在，它将查找指定图像的旧方法： <code> <link rel="image_src" href="/myimage.jpg"/> </code> 。如果两者都不存在，Facebook将查看您页面的内容并从您的页面中选择符合其共享图像标准的图像：图像必须至少为200像素×200像素，最大宽高比为3：1，并且在PNG中， JPEG或GIF格式。 </p> <P> 的<strong> 我可以指定多个图像以允许用户选择图像吗？ </强> </p> <P> 是的，您只需按照希望它们出现的顺序添加多个图像元标记。然后将向用户显示图像选择器对话框： <BR/> <img src =“https://i.stack.imgur.com/WyErv.png”alt =“Facebook图像选择器”/> </p> <P> 的<strong> 我指定了适当的图像元标记。为什么Facebook不接受这些变化？ </强> </p> <P> 一旦网址被共享，Facebook的抓取工具就会拥有一个用户代理 <code> facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) </code> ，将访问您的页面并缓存元信息。要强制Facebook服务器清除缓存，请使用 <a href="https://developers.facebook.com/tools/debug" rel="noreferrer"> Facebook Url调试器/ Linter工具 </A> 他们 <a href="https://developers.facebook.com/blog/post/390/" rel="noreferrer"> 于2010年6月推出 </A> 刷新缓存并解决页面上任何元标记问题。 </p> <P> 此外，页面上的图像必须可由Facebook抓取工具公开访问。你应该指定绝对网址 <a href="http://example.com/yourimage.jpg" rel="noreferrer"> http://example.com/yourimage.jpg </A> 而不仅仅是/yourimage.jpg。 </p> <P> 的<strong> 我可以使用客户端代码（如Javascript或jQuery）更新这些元标记吗？ </强> 与搜索引擎抓取器非常相似，Facebook刮刀不执行脚本，因此下载页面时出现的元标记都是用于图像选择的元标记。 </p> <P> 的<strong> 添加这些标记会导致我的页面不再验证。我怎样才能解决这个问题？ </强> </p> <P> 您可以将必要的Facebook命名空间添加到标记中，然后您的页面应通过验证： </p> <pre class="lang-html prettyprint-override"> <code> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> </code> </pre> </DIV>

编辑
5#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 使用Facebook提要对话框而不是共享对话框来显示自定义图像 </强> </p> <P> 例： </p> <pre> <code> 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 </code> </pre> </DIV>

编辑
6#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我无法让Facebook从特定帖子中选择正确的图像，所以我做了本页概述的内容： </p> <P> <a href="https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts"> https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts </A> </p> <P> 换句话说，这样的事情： </p> <pre> <code> <b:if cond='data:blog.url == "http://urlofyourpost.com"'> <meta content='http://urlofyourimage.png' property='og:image'/> </b:if> </code> </pre> <P> 基本上，您将在您网站的HTML中对if语句进行硬编码，以使其更改元内容，无论您为该帖子更改了哪些内容。这是一个混乱的解决方案，但它的工作原理。 </p> </DIV>

编辑
7#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要更改标题，描述和图像，我们需要在head标记下添加一些元标记。 </p> <P> 步骤1 ： <BR/> 在head标记下添加元标记 </p> <pre> <code> <html> <head> <meta property="og:url" content="http://www.test.com/" /> <meta property="og:image" content="http://www.test.com/img/fb-logo.png" /> <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" /> <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." /> </code> </pre> <P> 下一步： <BR/> 点击下面的链接 <BR/> <a href="https://developers.facebook.com/tools/debug" rel="noreferrer"> https://developers.facebook.com/tools/debug </A> </p> <P> 在文本框中添加您的URL（例如 <a href="http://www.test.com/" rel="noreferrer"> http://www.test.com/ </A> ）你提到标签的地方。单击DEBUG按钮。 </p> <P> 完成。 </p> <P> 你可以在这里验证 <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/" rel="noreferrer"> https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/ </A> </p> <P> 在上面的网址中，u =您的网站链接 </p> <P> 请享用！！！！ </p> </DIV>

编辑

登录后才能参与评论