首页 文章

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

提问于
浏览
388

使用Facebook Sharer时,Facebook将为用户提供使用从源中提取的一些图像中的一个作为其链接预览的选项 . 如何选择这些图像,以及如何确保我的页面上的任何特定图像始终包含在此列表中?

12 回答

  • 12

    当您分享Facebook时,您必须将html添加到head部分的下一个元标记中:

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

    就是这样!

    根据FB告诉你的内容,添加按钮 .

    您需要的所有信息都在www.facebook.com/share/

  • 0

    当我的页面被共享时,如何告诉Facebook使用哪个图像?

    Facebook有一套open-graph meta tags,它决定要显示哪个图像 .

    Facebook图像的关键是:

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

    它应该出现在页面顶部的 <head></head> 标记内 .

    如果这些标签不存在,它将查找指定图像的旧方法: <link rel="image_src" href="/myimage.jpg"/> . 如果两者都不存在,Facebook将查看您页面的内容并从您的页面中选择符合其共享图像标准的图像:图像必须至少为200像素×200像素,最大宽高比为3:1,并且在PNG中, JPEG或GIF格式 .

    Can I specify multiple images to allow the user to select an image?

    是的,您只需按照希望它们出现的顺序添加多个图像元标记 . 然后将向用户显示图像选择器对话框:

    Facebook Image Selector

    I specified the appropriate image meta tags. Why isn't Facebook accepting the changes?

    一旦共享了网址,Facebook的抓取工具(具有 facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) 的用户代理)将访问您的网页并缓存元信息 . 要强制Facebook服务器清除缓存,请使用它们launched in June 2010来刷新缓存并解决页面上的任何元标记问题 .

    此外,页面上的图像必须可由Facebook抓取工具公开访问 . 您应该指定绝对网址,如http://example.com/yourimage.jpg,而不仅仅是/yourimage.jpg .

    Can I update these meta tags with client side code like Javascript or jQuery? 否 . 与搜索引擎抓取器非常相似,Facebook刮刀不执行脚本,因此下载页面时出现的元标记都是用于图像选择的元标记 .

    Adding these tags causes my page to no longer validate. How can I fix this?

    您可以将必要的Facebook命名空间添加到标记中,然后您的页面应通过验证:

    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:og="http://ogp.me/ns#"
          xmlns:fb="https://www.facebook.com/2008/fbml">
    
  • 13

    截至2013年,如果你使用facebook.com/sharer.php(PHP),你可以简单地制作任何按钮/链接:

    <a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
    

    链接查询参数:

    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
    

    这很简单:你不需要任何js或其他设置 . 只是一个HTML原始链接 . 以您想要的任何方式设置A标签的样式 .

  • 11

    将以下标记放在 head 中:

    <link rel="image_src" href="/path/to/your/image"/>
    

    来自http://www.facebook.com/share_partners.php

    至于在没有这个标签的情况下它选择的默认值,我不确定 .

  • 2

    根据我的经验,http://www.facebook.com/sharer.php不使用元标记 . 它使用您传递的字符串 . 见下文 .

    http://www.facebook.com/sharer.php?s=100&p[title]=THIS是我的名称&p [摘要] =这是我的摘要&p [url] = http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS

    元标记与Facebook的开发人员/发送按钮一样,其他Open Graph信息也是如此 . 因此,如果你使用Facebook的实际元素之一,如评论等,那将全部与Open Graph相关联 .

    更新:有两种方法可以使用sharer *注意?s与查询字符串中的?u值
    1 ==> STRING: http://www.facebook.com/sharer.php?s来自上方的内容
    ~~>将从字符串中提取信息 .
    2 ==> URL: http://www.facebook.com/sharer.php?u=url其中url等于实际网址
    ~~>将刮取url值中提供的页面
    ~~>您可以在这里测试测试值:https://developers.facebook.com/tools/debug

  • 1

    旧方式,不再有效:

    <link rel="image_src" href="http://yoururl/yourimage"/>
    

    报道新方式,也行不通:

    <meta property="og:image" content="http://yoururl/yourimage"/>
    

    它在我实施它的第一天随机工作,从那时起根本没用 .

    Facebook linter页面,一个检查您的页面的实用程序,报告一切正确并显示我选择的缩略图...只是share.php页面本身似乎没有运行 . 必须是Facebook上的一个错误,他们显然不在乎修复,因为我在他们的系统中看到的关于这个问题的每个错误报告都说解决或修复 .

  • 1

    要更改 Headers ,描述和图像,我们需要在head标记下添加一些元标记 .

    步骤1 :
    在head标记下添加元标记

    <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." />
    

    下一步 :
    点击下面的链接
    https://developers.facebook.com/tools/debug

    在您提到标签的文本框中添加您的URL(例如http://www.test.com/) . 单击DEBUG按钮 .

    完成 .

    你可以在这里验证https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

    在上面的网址中,u =您的网站链接

    请享用 !!!!

  • 1

    对于安全的HTTPS

    <meta property="og:image:secure_url" content="https://image.path.png" />
    
  • 36

    我有这个问题,并修复它manuel-84的建议 . 使用400x400px图像效果很好,而我的小图像从未出现在共享器中 .

    请注意,Facebook建议至少200像素的方形图像作为og:image标签:https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

  • 28

    这对我有用:我在标签后面的页面上放置了所需的缩略图,使其太小而无法看到..

    <img src="imagename.jpg" width="1" height="1" />
    

    我没有用高度0和宽度0测试它,但它可能仍然可以工作..这不保证用户将选择此图像..

    此外,似乎Facebook在您的页面上缓存缩略图并且不会总是检查它是否为新的..尝试将此添加到您网站上的另一个页面,您将看到它的工作原理 .

  • 10

    Use facebook feed dialog instead of share dialog to show custom Images

    例:

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

    我无法让Facebook从特定帖子中选择正确的图像,所以我做了本页概述的内容:

    https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

    换句话说,这样的事情:

    <b:if cond='data:blog.url == "http://urlofyourpost.com"'>
      <meta content='http://urlofyourimage.png' property='og:image'/>
     </b:if>
    

    基本上,您将在您网站的HTML中对if语句进行硬编码,以使其更改元内容,无论您为该帖子更改了哪些内容 . 这是一个混乱的解决方案,但它的工作原理 .

相关问题