thomasclausen / jquery-facebook-wall Goto Github PK

View Code? Open in Web Editor NEW

48.0 48.0 19.0 851 KB

jQuery plugin that lets you show the latest updates from your facebook profile og page.

Home Page: http://beta.thomasclausen.dk/facebook-wall/

JavaScript 60.53% HTML 7.98% CSS 31.49%

jquery-facebook-wall's Introduction

Hi there 👋

jquery-facebook-wall's People

Contributors

Stargazers

Watchers

Forkers

demonslord ciptard shamilfarajullayev davgit bjarnef ajitsinghit2 mojozoom jqueryscript thatguyhari pnoble04 shyoon05 oliverportmo dksmk msartini haegyung happysj hakimkal 23creative

jquery-facebook-wall's Issues

Image thumbnail size

How do I grab a larger image from Facebook? At the moment it’s a tiny 130px x 130px thumbnail. Thanks

Sort posts from multiple pages/profiles

Find a way to sort posts (ex. by date) from multiple pages/profiles.
Perhaps this could be achived by adding a "data" attribute to each post.

Plugin not work

Hi,

This plugin is good but from some time have lot's of problems and now not work not more.
So I edited the plugin for update it to latest Facebook API.

The updated plugin code is here:

(function ($) {
    $.fn.facebook_wall = function (options) {
        if (options.id === undefined || options.access_token === undefined) {
            return;
        }

        options = $.extend({
            id: "",
            access_token: "",
            limit: 15,
            timeout: 400,
            speed: 400,
            effect: "slide",
            locale: "en_US",
            avatar_size: "square",
            message_length: 200,
            show_guest_entries: !0,
            text_labels: {
                shares: {
                    singular: "Shared % time",
                    plural: "Shared % times"
                },
                likes: {
                    singular: "% Like",
                    plural: "% Likes"
                },
                comments: {
                    singular: "% comment",
                    plural: "% comments"
                },
                like: "Like",
                comment: "Write comment",
                share: "Share",
                weekdays: ["Sunday", "Monday", "Thuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                months: ["januari", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
                seconds: {
                    few: 'second ago',
                    plural: ' seconds ago'
                },
                minutes: {
                    singular: ' minut ago',
                    plural: ' minutes ago'
                },
                hours: {
                    singular: ' hour ago',
                    plural: ' hours ago'
                },
                days: {
                    singular: ' day ago',
                    plural: ' days ago'
                }
            },
            on_complete: null
        }, options);

        var graphURL = 'https://graph.facebook.com/',
            graphPOSTS = graphURL + 'v2.9/' + options.id + '/?access_token=' + options.access_token + '&limit=' + options.limit + '&locale=' + options.locale + '&date_format=U&fields=posts{caption,message,picture,from,link,source,properties,icon,actions,is_hidden,is_expired,likes,comments,shares,status_type,object_id,created_time,updated_time,type}',
			e = $(this);

        e.append('<div class="feeds-loading facebook-loading"></div>');

        $.getJSON(graphPOSTS, function (posts) {
            $.each(posts.posts.data, function () {
                var output = '',
					post_class = '',
					media_class = '',
					split_id = '';

                if (this.is_hidden === false) {
                    if (this.type === 'link') {
                        post_class = 'type-link ';
                    } else if (this.type === 'photo') {
                        post_class = 'type-photo ';
                    } else if (this.type === 'status') {
                        post_class = 'type-status ';
                    } else if (this.type === 'video') {
                        post_class = 'type-video ';
                    }
                    output += '<li class="post ' + post_class + 'avatar-size-' + options.avatar_size + '">';
                    output += '<div class="meta-header">';
                    output += '<div class="avatar"><a href="http://www.facebook.com/profile.php?id=' + this.from.id + '" target="_blank" title="' + this.from.name + '"><img src="' + (graphURL + this.from.id + '/picture?type=' + options.avatar_size) + '" alt="' + this.from.name + '" /></a></div>';
                    output += '<div class="author"><a href="http://www.facebook.com/profile.php?id=' + this.from.id + '" target="_blank" title="' + this.from.name + '">' + this.from.name + '</a></div>';
                    output += '<div class="date">' + timeToHuman(this.created_time) + '</div>';
                    output += '</div>';

                    if (this.message !== undefined) {
                        if (options.message_length > 0 && this.message.length > options.message_length) {
                            output += '<div class="message">' + modText(this.message.substring(0, options.message_length)) + '...</div>';
                        } else {
                            output += '<div class="message">' + modText(this.message) + '</div>';
                        }
                    } else if (this.story !== undefined) {
                        if (options.message_length > 0 && this.story.length > options.message_length) {
                            output += '<div class="story">' + modText(this.story.substring(0, options.message_length)) + '...</div>';
                        } else {
                            output += '<div class="story">' + modText(this.story) + '</div>';
                        }
                    }

                    if (this.type === 'link' || this.type === 'photo' || this.type === 'video') {
                        if (this.picture !== undefined || this.object_id !== undefined) {
                            media_class = ' border-left';
                        } else {
                            media_class = '';
                        }
                        output += '<div class="media' + media_class + ' clearfix">';
                        if (this.picture !== undefined) {
                            output += '<div class="image"><a href="' + this.link + '" target="_blank"><img src="' + this.picture + '" /></a></div>';
                        } else if (this.object_id !== undefined) {
                            output += '<div class="image"><a href="' + this.link + '" target="_blank"><img src="' + (graphURL + this.object_id + '/picture?type=album') + '" /></a></div>';
                        }
                        output += '<div class="media-meta">';
                        if (this.name !== undefined) {
                            output += '<div class="name"><a href="' + this.link + '" target="_blank">' + this.name + '</a></div>';
                        }
                        if (this.caption !== undefined) {
                            output += '<div class="caption">' + modText(this.caption) + '</div>';
                        }
                        if (this.description !== undefined) {
                            output += '<div class="description">' + modText(this.description) + '</div>';
                        }
                        output += '</div>';
                        output += '</div>';
                    }

                    output += '<div class="meta-footer">';
                    output += '<time class="date" datetime="' + this.created_time + '" pubdate>' + timeToHuman(this.created_time) + '</time>';
                    if (this.likes !== undefined && this.likes.data !== undefined) {
                        if (this.likes.count !== undefined) {
                            if (this.likes.count === 1) {
                                output += '<span class="seperator">&middot;</span><span class="likes">' + options.text_labels.likes.singular.replace('%', this.likes.count) + '</span>';
                            } else {
                                output += '<span class="seperator">&middot;</span><span class="likes">' + options.text_labels.likes.plural.replace('%', this.likes.count) + '</span>';
                            }
                        } else {
                            if (this.likes.data.length === 1) {
                                output += '<span class="seperator">&middot;</span><span class="likes">' + options.text_labels.likes.singular.replace('%', this.likes.data.length) + '</span>';
                            } else {
                                output += '<span class="seperator">&middot;</span><span class="likes">' + options.text_labels.likes.plural.replace('%', this.likes.data.length) + '</span>';
                            }
                        }
                    }
                    if (this.comments !== undefined && this.comments.data !== undefined) {
                        if (this.comments.data.length === 1) {
                            output += '<span class="seperator">&middot;</span><span class="comments">' + options.text_labels.comments.singular.replace('%', this.comments.data.length) + '</span>';
                        } else {
                            output += '<span class="seperator">&middot;</span><span class="comments">' + options.text_labels.comments.plural.replace('%', this.comments.data.length) + '</span>';
                        }
                    }
                    if (this.shares !== undefined) {
                        if (this.shares.count === 1) {
                            output += '<span class="seperator">&middot;</span><span class="shares">' + options.text_labels.shares.singular.replace('%', this.shares.count) + '</span>';
                        } else {
                            output += '<span class="seperator">&middot;</span><span class="shares">' + options.text_labels.shares.plural.replace('%', this.shares.count) + '</span>';
                        }
                    } else {
                        output += '<span class="seperator">&middot;</span><span class="shares">' + options.text_labels.shares.plural.replace('%', '0') + '</span>';
                    }
                    split_id = this.id.split('_');
                    output += '<div class="actionlinks"><span class="like"><a href="http://www.facebook.com/permalink.php?story_fbid=' + split_id[1] + '&id=' + split_id[0] + '" target="_blank">' + options.text_labels.like + '</a></span><span class="seperator">&middot;</span><span class="comment"><a href="http://www.facebook.com/permalink.php?story_fbid=' + split_id[1] + '&id=' + split_id[0] + '" target="_blank">' + options.text_labels.comment + '</a></span><span class="seperator">&middot;</span><span class="share"><a href="http://www.facebook.com/permalink.php?story_fbid=' + split_id[1] + '&id=' + split_id[0] + '" target="_blank">' + options.text_labels.share + '</a></span></div>';
                    output += '</div>';

                    if (this.likes !== undefined && this.likes.data !== undefined) {
                        output += '<ul class="like-list">';
                        for (var l = 0; l < this.likes.data.length; l++) {
                            output += '<li class="like">';
                            output += '<div class="meta-header">';
                            output += '<div class="avatar"><a href="http://www.facebook.com/profile.php?id=' + this.likes.data[l].id + '" target="_blank" title="' + this.likes.data[l].name + '"><img src="' + (graphURL + this.likes.data[l].id + '/picture?type=' + options.avatar_size) + '" alt="' + this.likes.data[l].name + '" /></a></div>';
                            output += '<div class="author"><a href="http://www.facebook.com/profile.php?id=' + this.likes.data[l].id + '" target="_blank" title="' + this.likes.data[l].name + '">' + this.likes.data[l].name + '</a>' + options.text_labels.likes.singular.replace('%', '') + '</div>';
                            output += '</div>';
                            output += '</li>';
                        }
                        output += '</ul>';
                    }
                    if (this.comments !== undefined && this.comments.data !== undefined) {
                        output += '<ul class="comment-list">';
                        for (var c = 0; c < this.comments.data.length; c++) {
                            output += '<li class="comment">';
                            output += '<div class="meta-header">';
                            output += '<div class="avatar"><a href="http://www.facebook.com/profile.php?id=' + this.comments.data[c].from.id + '" target="_blank" title="' + this.comments.data[c].from.name + '"><img src="' + (graphURL + this.comments.data[c].from.id + '/picture?type=' + options.avatar_size) + '" alt="' + this.comments.data[c].from.name + '" /></a></div>';
                            output += '<div class="author"><a href="http://www.facebook.com/profile.php?id=' + this.comments.data[c].from.id + '" target="_blank" title="' + this.comments.data[c].from.name + '">' + this.comments.data[c].from.name + '</a></div>';
                            output += '<time class="date" datetime="' + this.comments.data[c].created_time + '" pubdate>' + timeToHuman(this.comments.data[c].created_time) + '</time>';
                            output += '</div>';
                            output += '<div class="message">' + modText(this.comments.data[c].message) + '</div>';
                            output += '<time class="date" datetime="' + this.comments.data[c].created_time + '" pubdate>' + timeToHuman(this.comments.data[c].created_time) + '</time>';
                            output += '</li>';
                        }
                        output += '</ul>';
                    }
                    output += '</li>';

                    e.append(output);
                }
            });
        }).done(function () {
            $('.facebook-loading', e).fadeOut(800, function () {
                $(this).remove();
                for (var p = 0; p < e.children('li').length; p++) {
                    if (options.effect === 'none') {
                        e.children('li').eq(p).show();
                    } else if (options.effect === 'fade') {
                        e.children('li').eq(p).delay(p * options.timeout).fadeIn(options.speed);
                    } else {
                        e.children('li').eq(p).delay(p * options.timeout).slideDown(options.speed, function () {
                            $(this).css('overflow', 'visible');
                        });
                    }
                }
            });
            if ($.isFunction(options.on_complete)) {
                options.on_complete.call();
            }
        });

        function modText(text) {
            return nl2br(autoLink(escapeTags(text)));
        }
        function nl2br(str) {
            return str.replace(/(\r\n)|(\n\r)|\r|\n/g, '<br />');
        }
        function autoLink(str) {
            return str.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1" target="_blank">$1</a>');
        }
        function escapeTags(str) {
            return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        }
        function timeToHuman(time) {
            var timestamp = new Date(time * 1000),
                dateString = timestamp.toGMTString(),
                time_difference = Math.round(new Date().getTime() / 1000) - time;

            if (time_difference < 10) {
                return options.text_labels.seconds.few;
            } else if (time_difference < 60) {
                return Math.round(time_difference) + options.text_labels.seconds.plural;
            } else if (Math.round(time_difference / 60) === 1) {
                return Math.round(time_difference / 60) + options.text_labels.minutes.singular;
            } else if (Math.round(time_difference / 60) < 60) {
                return Math.round(time_difference / 60) + options.text_labels.minutes.plural;
            } else if (Math.round(time_difference / (60 * 60)) === 1) {
                return Math.round(time_difference / (60 * 60)) + options.text_labels.hours.singular;
            } else if (Math.round(time_difference / (60 * 60)) < 24) {
                return Math.round(time_difference / (60 * 60)) + options.text_labels.hours.plural;
            } else if (Math.round(time_difference / (60 * 60 * 24)) === 1) {
                return Math.round(time_difference / (60 * 60 * 24)) + options.text_labels.days.singular;
            } else if (Math.round(time_difference / (60 * 60 * 24)) <= 10) {
                return Math.round(time_difference / (60 * 60 * 24)) + options.text_labels.days.plural;
            } else {
                return options.text_labels.weekdays[timestamp.getDay()] + ' ' + timestamp.getDate() + '. ' + options.text_labels.months[timestamp.getMonth()] + ' ' + timestamp.getFullYear();
            }
        }
    };
})(jQuery);

Wrong limit count when a post in the feed is marked as hidden

The limit count is wrong, when a post in the Facebook feed has the variable "is_hidden: true".

This happens because the count is being set before the variable is defined.

Is there any method of preventing posts like "[Name] commented on a post" or "liked" posts? I'm getting posts like this in a facebook feed:
4 days ago
Moneypenny's Blacksmiths Workshop commented on a post.
Saturday 1. November 2014
Moneypenny's Blacksmiths Workshop likes a status.

Which are kind of useless for a feed. I'd prefer to just have direct posts from the user, is that possible?

New type - offer

There is a new post type called "offer" I need to look into.

Security Issue - exposing access token

Hello, is it not a security issue to have your access token embedded into client side code?

not working in chrome?

doesn't load for me in chrome Version 28.0.1500.72 m.
firefox, safari and even IE are loading posts - chrome not.
any ideas?
THX

Fix for issue that caused plugin to stop working on 08/04/15

on line 56 of facebook_wall.plugin.js change if (this.is_hidden === undefined) to if (this.is_hidden === false)

Make it possible to change locale

Add a new setting to make it possible to also change locale

Not working

But if I copy http://beta.thomasclausen.dk/facebook-wall/ - no problem. I would use it but not show images (from your id showing) and I see only two last post from my Facebook page.

And if I paste id of my page (by graph.facebook...) - is ok, but if I take last numbers from event URL - nothing loading.

Get the next posts

Include a button to allow users to load the next X posts depending on the amount set in options.limit

Date in the local language

Hi,
I installed the plugin on http://andreadigiovanni.it but the date is shown in Norwegian.
Can someone help me? Thanks!

Problem with Internet Explorer

The script seems to load, but doesn't output anything in Internet Explorer.

Stopped working

Facebook wall stopped after july's breaking changes. Is there any fix?

the plugin is not working

I don't understand why but the plugin is not working, there is an infinite loading....

message_tags in comments

There is a new property called "message_tags" in the comments I need to look into.

example error

Stopped working 08/04/15

I had just managed to use this great plugin to display my company's facebook feed on the front of our website and then it suddenly stopped working yesterday!

It appears that your demo has also stopped working and I'm wondering what has changed in Facebook's API or ...?

Any help you could give me would be much appreciated.

P.S. Thanks for writing this plugin in the first place!

Uncaught TypeError: Cannot read property 'id' of undefined

Hello!

I am using this plugin on some sites. Some still works, but I suddenly got this error in Chrome:
Uncaught TypeError: Cannot read property 'id' of undefined, row 199

In Firefox it says:
TypeError: this.comments.data[c].from is undefined

Row 199:
output += '<div class="avatar"><a href="http://www.facebook.com/profile.php?id=' + this.comments.data[c].from.id + '" target="_blank" title="' + this.comments.data[c].from.name + '" class="img-link"><img src="' + (graphURL + this.comments.data[c].from.id + '/picture?type=' + options.avatar_size) + '" alt="' + this.comments.data[c].from.name + '" /></a></div>';

It seems there is a problem with ID (Username). But since it is still working on some sites, it might be a new account setting or something that mess up. Anyone who had the same problem and who have solved it?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.