顯示Facebook鏈接帖子的縮略圖

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的URL他們首先提到的是你在之前的請求中找回的那個。