Question

我正在开展一个项目，我遇到了一个棘手的情况，我想显示在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%2Fstackoverflow%2Fimg%2Fapple-touch-icon%402.png%3Fv%3D73d79a89bded%26a"
id: "1745326375703342_1750176195218360"
is_published: true
link: "http://stackoverflow.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.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: '&'
                }
            };
        }
    );

Answer 1

您可能最好使用嵌入式帖子API - 请参阅https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually - 他们首次引用的网址中的ID是您在上一个请求中返回的ID。

显示Facebook链接帖子的缩略图

1 个答案: