pavelk2 / social-feed

JavaScript plugin that shows a user feed from the most popular social networks
http://pavelk2.github.io/social-feed-example/
MIT License
962 stars 304 forks source link

facebook: get picture from fbstaging #189

Open HartLarsson opened 8 years ago

HartLarsson commented 8 years ago

i still testing the script and using on one of my fb feed i discover that is not possible to get any picture from this json :

{ "id": "233599196657532_1392062910811149", "from": { "name": "A.N.G.E.L.O. Vintage Palace", "id": "233599196657532" }, "name": "MarieClaire.it", "message": "For Stripes Lovers! ;)", "created_time": "2016-05-31T07:45:46+0000", "story": "A.N.G.E.L.O. Vintage Palace shared MarieClaire.it's post.", "description": "Siete in cerca di ispirazione? Con loro andate sul SICURO! <3", "link": "http://www.marieclaire.it/Moda/tendenze/maglia-a-righe#1", "picture": "https://external.xx.fbcdn.net/safe_image.php?d=AQAu8g88M-w1PuI7&w=130&h=130&url=fbstaging%3A%2F%2Fgraph.facebook.com%2Fstaging_resources%2FMDExMDE1NDg0NTA4MzMwMDAyMTo3ODA1ODA0MzY%3D&cfs=1&sx=69&sy=0&sw=600&sh=600" },

As you can see the picture URL refer to a staging:resource. I don't know why the shared post that have a pic has a staging state but using the url as is yuo get 130x130 thumbnail. By changing w and h parameter you can get different sizes.

looking inside the script this part is responsible of gettign the attachment:

                prepareAttachment: function(element) {
                        var image_url = element.picture;
                        if (image_url.indexOf('_b.') !== -1) {
                            //do nothing it is already big
                        } else if (image_url.indexOf('safe_image.php') !== -1) {
                            image_url = Feed.facebook.utility.getExternalImageURL(image_url, 'url');

                        } else if (image_url.indexOf('app_full_proxy.php') !== -1) {
                            image_url = Feed.facebook.utility.getExternalImageURL(image_url, 'src');

                        } else if (element.object_id) {
                            image_url = Feed.facebook.graph + element.object_id + '/picture/?type=normal';
                        }
                        return '<img class="attachment" src="' + image_url + '" />';
                    },
                    getExternalImageURL: function(image_url, parameter) {
                        image_url = decodeURIComponent(image_url).split(parameter + '=')[1];
                        if (image_url.indexOf('fbcdn-sphotos') === -1) {
                            return image_url.split('&')[0];
                        } else {
                            return image_url;
                        }

                    },

Someone have found a solution to get in some way the thumbnail image? I've seen that also FB video thumbnails have the same stage status. If we found a workaround to fix that, we can get fb video preview too.

thank you

zenzei commented 8 years ago

I don't know if it's the right thing to do, but was having the same problem and updating the getExternalImageURL like this made the images appearing.

                    getExternalImageURL: function(image_url, parameter) {
                        image_url = decodeURIComponent(image_url).split(parameter + '=')[1];
                        if (image_url.indexOf('fbcdn-sphotos') === -1) {
                            image_url = image_url.split('&')[0];

                            if(image_url.indexOf("fbstaging") !== -1) {
                              image_url = "https://external.xx.fbcdn.net/safe_image.php?url="+encodeURIComponent(image_url);
                            }

                            return image_url
                        } else {
                            return image_url;
                        }

                    },

As you can see, i add a new check to see if the image is from "fbstaging", appending the safe_image.php to correctly view the image.

Hope it's useful, at least as a starting point.

HartLarsson commented 8 years ago

thank you so much i did a similar workaround too :) I've also forced the css to display image from shared posts:

.social-feed-element .attachment {
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
    /* forcing shared post thumbnails  */
    display: inline !important;
}
NikolayS commented 7 years ago

Thank you once again @zenzei, helped me today