I am working on a project and I am stuck at one tricky situation, I want to show the thumbnails for the link posts that are made on the Facebook page, for example if I share a link of an image on my Facebook page, it shows the image there, when I make a call to the Facebook graph api, I get an object where the source type is mentioned as a link, with a source field containing the actual link, and I want to some how show a thumbnail of that post possibly. what i have as of now is this, there is an image shown below and the code...what i would like is to have some thumbnail preview like the one that Facebook has or something similar.
The object that i get from Facebook has the following info:
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"
I also want to show the video, right now some videos play but others like the one from youtube do not, I am not to hung up on that as of now.
I have an angular directive that I use to do all this task, the code is below:
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: '&'
}
};
}
);
