我目前正在使用一项新功能,允许用户在Facebook上共享页面时选择他们想要使用的缩略图.用户应该能够使用Facebook小部件,如发送对话框或共享按钮,以及简单地将URL剪切并粘贴到Facebook上的udpate状态对话框中.
我已经阅读了很多文档,这似乎表明我只需要在共享的页面中添加多个og:image标签.我已经完成了这个并通过linter运行页面,因此缓存得到更新.
当直接将页面传递给share.php时,有效地删除我的任何客户端代码并让对话框显示它正在抓取的内容,我看到该页面中有3个图像可用.
我不确定我在这里做错了什么.
这是linter 结果,graph对象,sharer.php链接和页面.任何人都知道我可能做错了什么?
我已经确认,共享对话框至少会遵守og:title标记.我还测试了图像的大小,并包括文件扩展名,如下所示.
我知道这很有效,因为buzzfeed具有我想要的确切功能.我把我的例子减少到了我认为应该工作的核心部分.你可以在这里找到完整的资源.
javascript facebook-sharer facebook-javascript-sdk facebook-opengraph
我在我的单页应用程序中使用knockout(应用程序只有一个入口点,应用程序的视图通过进行ajax调用和修改页面而改变).
我的应用程序,我希望人们利用通过fb,twitter,g +共享页面.在标准应用程序中,我会做这样的事情:
<meta property="og:title" content="page title" />
.. other things like url, image ..
Run Code Online (Sandbox Code Playgroud)
在fb上分享页面的人会得到一个很好的页面标题.但是在SPA中,我的标题是在开始时创建的,然而我正在用JS修改它:$('meta[name="og:title"]').attr('content', 'new title');所有社交网络都采用旧内容(这是预期的并且它是用这些 资源编写的).
我的应用程序正在使用JS路由,因此每个不同的页面都有自己的特定地址,如下所示:http://domain.com/#!route/123.阅读两个类似的问题我得到了相互矛盾的答案
当然第二个只适用于FB.
我的问题是:2014年引擎解析开放图形信息的方式是否有任何改进,是否可以在单页面应用程序中正确使用它.特别是我有兴趣在FB,Twitter,G +上很好地展示共享内容.
当我通过对象调试器运行我的Facebook Open Graph对象(http://www.21dads.com/testobject)时,我收到以下错误:
对象无效值:'thetestasdf:recipie'类型的URL'http://www.21dads.com/testobject'上的对象无效,因为属性'og:url'的给定值'www.21dads.com/testobject'可以不被解析为类型'url'.
缺少必需属性:og:url属性是必需的,但不存在.
缺少必需属性:og:type属性是必需的,但不存在.
缺少必需属性:og:title属性是必需的,但不存在.
这是对象页面上的HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# thetestasdf: http://ogp.me/ns/fb/thetestasdf#">
<meta property="fb:app_id" content="325291980834949" />
<meta property="og:type" content="thetestasdf:recipie" />
<meta property="og:url" content="www.21dads.com/testobject" />
<meta property="og:title" content="Cookie Recipie!" />
<meta property="og:description" content="Tastiest recipe ever" />
<meta property="og:image" content="http://cdn.techpatio.com/wp-content/uploads/2009/11/cookie_law_eu.gif" />
<title> Cookie Recipie</title>
<head/>
<body>
<p> Test object page </p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
URL"www.21dads.com/testobject"是我的控制器,然后从视图文件生成HTML.为什么不能解析此URL?
为什么我已经包含其他"缺少必需属性"错误?
谢谢.
我正确地设置og:image在我的网站上,facebook linter看到它(facebook调试器)然而,它说图像应该至少为200x200,而事实并非如此,我的图像是250x250 图像.
可能导致问题的原因是什么?这与Cloudfront有什么关系吗?
Edit: I got around it by switching from this image to another image which is a
jpg image, but still I couldn't find the cause for the problem since the image
looks fine.
Run Code Online (Sandbox Code Playgroud) 我正在浏览Facebook的Open Graph API.所有这些看起来都很简单,并且除了fb:adminsmeta标签之外,它们都得到了很好 这个是来做什么的?
例如:
<meta property="fb:admins" content="USER_ID"/>
Run Code Online (Sandbox Code Playgroud)
Facebook说:以逗号分隔的Facebook用户ID列表或管理此页面的Facebook平台应用程序ID.在您的页面上包含fb:admins和fb:app_id是有效的.我只是不确定这是什么.
我想这是ids绊倒的组合.
当我将两个管理员放入fb:admins元值时,我收到了Facebook Open Graph调试器警告.只有一个管理员,它通过罚款,但有两个我收到警告.一切正常,但我的强迫症想要做对.有帮助吗?
这是我的代码:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="122146944552301"/>
<meta property="fb:admins" content="15901643,15932442"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="http://uamedia.missouri.edu/mizmag/facebook-test.html" />
<meta property="og:site_name" content="UA Media" />
<meta property="og:title" content="Facebook Test" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Facebook Test</title>
</head>
Run Code Online (Sandbox Code Playgroud)
我收到这个错误:
解析器不匹配的元数据解析器的此元数据的结果与输入元数据不匹配.可能,这是由于数据以意外方式排序,为属性提供的多个值仅期望单个值,或者给定属性的属性值不匹配.以下是在解析结果中未显示的输入属性:'fb:admins'
有任何想法吗?
我正在尝试为Facebook创建一个自定义的开放图形故事,但我在og:image正确显示时遇到了一些麻烦.我正在使用这里和此处推荐的1200*630大小的图像,但在我的时间轴上,它会从图像的左边缘裁剪成一个正方形.它也在故事预览中显示为正方形,虽然这次是从中心裁剪出来的.
如何以正确的宽高比和大小显示图像?它只是责备的测试环境还是我需要在服务器端添加一些东西?我已经尝试过使用meta标签width而height没有成功.
目前标签看起来像这样:
<meta property="og:image" content="http://www.linktomyimage/1200x630pixels.png" />
我们如何动态添加/更新元标记,以便它们被Facebook/Whatsapp共享对话框选中?
我将angular 2应用程序升级为angular 4,以便在我们从API获取组件中的数据后,使用Meta服务动态添加/更新元标记.
到目前为止,在我的组件中,我有
this.metaService.updateTag({ property: 'og:title', content: pageTitle });
this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
Run Code Online (Sandbox Code Playgroud)
我正在使用updateTag,因为我已经添加了带有默认值的静态标记.当我检查元代码时,此代码会成功更新元标记值.
我知道Facebook/Whatsapp调试工具不执行任何javascript是有道理的,所以它不会在他们的环境中执行.
我正在使用https://developers.facebook.com/tools/debug/它,它总是选择有意义的默认标签值.
我的问题是,Facebook/Whatsapp动态获取更新的标签值的方法是什么?我正在使用Angular 4并通过API调用加载所有数据,因此在页面加载和脚本执行之前无法获取任何类型的数据.
我使用Facebook API和一个应用程序,每天最多自动发布到Facebook页面三次.这些公开帖子包含我CMS的最新更改,"app后端"是用PHP编写的.
目前,Facebook要求所有应用开发者提交他们的应用以供审核.这看起来很难,因为要提交的数据应该包含截屏视频.但是我没有在这样的截屏视频中显示任何内容,因为只有源代码创建新帖子......
Facebook页面API:"页面公共内容访问"审查截屏是一个有趣的起点:只是不要使用公共应用程序,但将其保持在开发模式.我将模式从live更改为dev,并且在过去几个月中创建的所有帖子都从我的页面中消失了.我可以看到他们,用我自己的帐户登录,但既没有登出也没有使用其他帐户:(有什么我忘了改变吗?
我是使用下面的标签相对于一个网站(博客)的文章的发表日期:
<meta name="article-published_time" property="article:published_time" content="2019-10-21T00:00:00-0600">
<meta name="article-modified_time" property="article:modified_time" content="2019-10-22T13:47:16-0600">
Run Code Online (Sandbox Code Playgroud)
我们收集的有关此页面的元数据:
正在提供以下反馈:
然后我添加了这个标签:
<meta name="publish_date" property="og:publish_date" content="2019-10-21T00:00:00-0600">
Run Code Online (Sandbox Code Playgroud)
事后检查员立即回复:
但是,当我删除最后一个标签时,post-inspector 仍然显示发布日期。逻辑上会说,如果这是导致发布日期被找到的唯一标签,那么删除该最终标签应该会使其消失。但删除它并不会让它消失。
问题是 - LinkedIn 需要这些标签中的哪一个或这些标签的组合来显示发布日期(如果您也回答与 Facebook 相关的问题,则附加值)。
facebook ×4
meta-tags ×2
opengraph ×2
angular ×1
blogs ×1
image ×1
javascript ×1
knockout.js ×1
linkedin ×1