显示 Facebook 链接帖子的缩略图
Posted
技术标签:
【中文标题】显示 Facebook 链接帖子的缩略图【英文标题】：Showing thumbnails for Facebook link posts 【发布时间】：2016-06-20 09:11:41 【问题描述】：我正在做一个项目，但我遇到了一个棘手的情况，我想显示在 Facebook 页面上创建的链接帖子的缩略图，例如，如果我在我的 Facebook 页面上共享图像的链接，它在那里显示图像，当我调用 Facebook 图形 api 时，我得到一个对象，其中源类型被提及为链接，源字段包含实际链接，我想知道如何显示缩略图那个帖子的可能。我现在拥有的是这个，下面显示了一张图片和代码......我想要的是有一些缩略图预览，就像 Facebook 拥有的那样或类似的东西。
enter image description here
我从 Facebook 获得的对象具有以下信息：
Object
$$hashKey: "object:178"
created_time: "2016-03-06T19:54:19+0000"
from: Object
full_picture: "https://external.xx.fbcdn.net/safe_image.php?d=AQDWMrj1iWI3vY7l&url=http%3A%2F%2Fmedia.aintitcool.com%2Fmedia%2Fuploads%2F2013%2Fnordling%2Fkirkhammett.jpg"
id: "1745326375703342_1750176341885012"
is_published: true
link: "http://media.aintitcool.com/media/uploads/2013/nordling/kirkhammett.jpg"
type: "link"
__proto__: Object
1: Object
$$hashKey: "object:179"
created_time: "2016-03-06T19:53:05+0000"
from: Object
full_picture: "https://external.xx.fbcdn.net/safe_image.php?d=AQCVutS4_1xuW9Ap&url=http%3A%2F%2Fcdn.sstatic.net%2F***%2Fimg%2Fapple-touch-icon%402.png%3Fv%3D73d79a89bded%26a"
id: "1745326375703342_1750176195218360"
is_published: true
link: "http://***.com/questions/3367415/get-epoch-for-a-specific-date-using-javascript"
type: "link"
__proto__: Object
2: Object
$$hashKey: "object:180"
created_time: "2016-03-06T19:51:51+0000"
from: Object
full_picture: "https://external.xx.fbcdn.net/safe_image.php?d=AQDISk6oZ8T_zx1k&w=720&h=720&url=https%3A%2F%2Fi.ytimg.com%2Fvi%2FcGudW81cw98%2Fmaxresdefault.jpg&cfs=1"
id: "1745326375703342_1750176091885037"
is_published: true
link: "https://www.youtube.com/watch?v=cGudW81cw98"
source: "https://www.youtube.com/embed/cGudW81cw98?autoplay=1"
type: "video"
我也想播放视频，现在有些视频可以播放，但其他像 youtube 上的视频不能播放，我暂时不会挂断电话。
我有一个 angular 指令用于完成所有这些任务，代码如下：
angular.module("TimelineModule", [])
.directive('contentItem', function ($compile)
var photoTemplate = "<ul class='timeline'><li ng-class='\"timeline-inverted\": content.is_published'><div class=timeline-badge ng-class=\"'success': content.is_published\"><i class='fa fa-check'></i></div><div class=\"timeline-panel\"><div class=\"timeline-heading\"> <h4 class=\"timeline-title\"> content.from.name </h4><p><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> content.created_time | date </small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> content.scheduled_publish_time*1000 | date </small><br/></span> <small class=\"text-muted\"><i class=\"fa fa-eye\"></i>someViews</small><br/></p></div><div class=\"timeline-body\"><br/><img ng-src=\" content.full_picture \" alt='entry photo' width='100%' height='100%'></div></div></li></ul>";
var statusTemplate = "<ul class='timeline'><li ng-class='\"timeline-inverted\": content.is_published'><div class='timeline-badge' ng-class=\"'success': content.is_published\"><i class='fa fa-check'></i></div><div class='timeline-panel'><div class='timeline-heading'><h4 class='timeline-title'> content.from.name </h4><p><small class='text-muted'><i class='fa fa-clock-o'></i> content.created_time | date</small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> content.scheduled_publish_time*1000 | date </small><br/></span><small class='text-muted'><i class='fa fa-eye'></i> Some views </small></p></div><div class='timeline-body'><p>content.message</p></div></div></li></ul>"
var videoTemplate = "<ul class='timeline'><li ng-class='\"timeline-inverted\": content.is_published'><div class=\"timeline-badge\" ng-class=\"'success': content.is_published\"><i class=\"fa fa-check\"></i></div><div class=\"timeline-panel\"><div class=\"timeline-heading\"><h4 class=\"timeline-title\"> content.from.name </h4><p><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> content.created_time | date </small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> content.scheduled_publish_time*1000 | date </small><br/></span><small class=\"text-muted\"><i class=\"fa fa-eye\"></i>someViews</small><br/></p></div><div class=\"timeline-body\"><p> content.message </p><br/><video autoplay ng-src=\" trustSrcFunction(src: source) \" controls width='100%' height='100%' frameborder='0' allowFullScreen type=\"video/youtube\"></video></div></div></li></ul>";
var linkTemplate = "<ul class='timeline'><li ng-class='\"timeline-inverted\": content.is_published'><div class=\"timeline-badge\" ng-class=\"'success': content.is_published\"><i class=\"fa fa-check\"></i></div><div class=\"timeline-panel\"><div class=\"timeline-heading\"><h4 class=\"timeline-title\"> content.from.name </h4><p><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> content.created_time | date </small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> content.scheduled_publish_time*1000 | date </small><br/></span><small class=\"text-muted\"><i class=\"fa fa-eye\"></i>someViews</small><br/></p></div><div class=\"timeline-body\"><p> content.message </p><br/><a target=\"_blank\" href=\" content.link \">Shared a link</a></div></div></li></ul>";
var getTemplate = function (contentType)
var template = '';
switch (contentType)
case 'photo':
template = photoTemplate;
break;
case 'video':
template = videoTemplate;
break;
case 'status':
template = statusTemplate;
break;
case 'link':
template = linkTemplate;
break;
return template;
;
var linker = function (scope, element)
element.html(getTemplate(scope.content.type));
$compile(element.contents())(scope);
;
return
restrict: 'E',
link: linker,
scope:
content: '=',
trustSrcFunction: '&'
;
);
【问题讨论】：
【参考方案1】：您可能最好使用嵌入式帖子 API - 请参阅 https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually - 他们首先引用的 URL 中的 ID 是您在上一个请求中返回的 ID。
【讨论】：
所以我尝试使用我在对象中获得的 permalink_url 但角度 js 指令不会编译 div 标签来呈现嵌入帖子... :( 将返回的 div 包装在模板中应该相对简单——确实我们有这个工作，但我不能分享代码，否则我会被枪杀！以上是关于显示 Facebook 链接帖子的缩略图的主要内容，如果未能解决你的问题，请参考以下文章