Custom Facebook feed on website using javascript / css / pagination

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 2873 Views - Last Post: 18 June 2013 - 06:44 PM

#1 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Custom Facebook feed on website using javascript / css / pagination

Posted 17 June 2013 - 08:37 PM

I think my title is relatively descriptive but if not I'll elaborate. I have the basic code to call Facebook's API to embed a custom news feed on an external website. My main usage for this is to populate and manage my company's news articles using an existing source: Facebook and, or Twitter.

For this example I've come across a preexisting Facebook javascript that does nearly everything I need it to, minus what I'm searching for on dreamincode.

Here's what I need the script to do:

  • Display Facebook news posts in a MMDDYYYY format
  • Allow users to like, comment, and click links from the news page.
  • Populate the news in a carousel or pagination based method.


As of now the Facebook script displays posts, but what I'm mostly focused on is embedding a limit (which it allows) and embed a pagination or carousel based navigation to read more posts past a certain number.

Page 1: Latest posts (1-10)
Page 2: Latests post (11-20)

So on and so forth.



To my knowledge, there's nothing that currently exists to these specifications. I'm extremely amateur when it comes to javascript, I only have some experience in basic C++, so this language is rather troublesome to me, especially when it comes to modifying variables and conditions.

I'll attach some of the code for what I'm working on as well as a live example.

Carousel code for individual news posts: http://www.dreamtemp...rousel_ver.html


script.js handles the Facebook API:
/*
	Note: this file was updated on June 19th 2011, to reflect
	changes in the Facebook API, so some lines differ from those
	in the tutorial.
*/

$(document).ready(function(){

	// Calling our plugin with a page id and an access token
	// that you will need to generate as explained in the tutorial:
	
	$('#wall').facebookWall({
		id:'myfacebookid',
		access_token:'myaccesstoken'
	});

});

// Creating our plugin. You can optionally
// place it in a separate file.

(function($){
	
	$.fn.facebookWall = function(options){
		
		options = options || {};
		
		if(!options.id){
			throw new Error('You need to provide an user/page id!');
		}
		
		if(!options.access_token){
			throw new Error('You need to provide an access token!');
		}
		
		// Default options of the plugin:
		
		options = $.extend({
			limit: 5	// You can also pass a custom limit as a parameter.
		},options);

		// Putting together the Facebook Graph API URLs:

		var graphUSER = 'https://graph.facebook.com/'+options.id+'/?fields=name,picture&access_token='+options.access_token+'&callback=?',
			graphPOSTS = 'https://graph.facebook.com/'+options.id+'/posts/?access_token='+options.access_token+'&callback=?&date_format=U&limit='+options.limit;
		
		var wall = this;
		
		$.when($.getJSON(graphUSER),$.getJSON(graphPOSTS)).done(function(user,posts){
			
			// user[0] contains information about the user (name and picture);
			// posts[0].data is an array with wall posts;
			
			var fb = {
				user : user[0],
				posts : []
			};

			$.each(posts[0].data,function(){
				
				// We only show links and statuses from the posts feed:
				if((this.type != 'link' && this.type!='status') || !this.message){
					return true;
				}

				// Copying the user avatar to each post, so it is
				// easier to generate the templates:
				this.from.picture = fb.user.picture;
				
				// Converting the created_time (a UNIX timestamp) to
				// a relative time offset (e.g. 5 minutes ago):
				this.created_time = relativeTime(this.created_time*1000);
				
				// Converting URL strings to actual hyperlinks:
				this.message = urlHyperlinks(this.message);

				fb.posts.push(this);
			});

			// Rendering the templates:
			$('#headingTpl').tmpl(fb.user).appendTo(wall);
			
			// Creating an unordered list for the posts:
			var ul = $('<ul>').appendTo(wall);
			
			// Generating the feed template and appending:
			$('#feedTpl').tmpl(fb.posts).appendTo(ul);
		});
		
		return this;

	};

	// Helper functions:

	function urlHyperlinks(str){
		return str.replace(/\b((http|https):\/\/\S+)/g,'<a href="$1" target="_blank">$1</a>');
	}

	function relativeTime(time){
		
		// Adapted from James Herdman's http://bit.ly/e5Jnxe
		
		var period = new Date(time);
		var delta = new Date() - period;

		if (delta <= 10000) {	// Less than 10 seconds ago
			return 'Just now';
		}
		
		var units = null;
		
		var conversions = {
			millisecond: 1,		// ms -> ms
			second: 1000,		// ms -> sec
			minute: 60,			// sec -> min
			hour: 60,			// min -> hour
			day: 24,			// hour -> day
			month: 30,			// day -> month (roughly)
			year: 12			// month -> year
		};
		
		for (var key in conversions) {
			if (delta < conversions[key]) {
				break;
			}
			else {
				units = key;
				delta = delta / conversions[key];
			}
		}
		
		// Pluralize if necessary:
		
		delta = Math.floor(delta);
		if (delta !== 1) { units += 's'; }
		return [delta, units, "ago"].join(' ');
		
	}
	
})(jQuery);





And I'm using the following code to display my Facebook's feed (displayed on news.php page):
<link rel="stylesheet" type="text/css" href="fbwall/css/styles.css"/>
		<div id="wall" class="facebookWall">
		</div>
		<!-- jQuery templates. Not rendered by the browser. Notice the type attributes -->
		<script id="headingTpl" type="text/x-jquery-tmpl">
		</script>
		<script id="feedTpl" type="text/x-jquery-tmpl">
		<ul>
<li>
	<div class="status">
		<p class="message">{{html message}}</p>
		{{if type == "link" }}
			<div class="attachment">
				{{if picture}}
					<img class="picture" src="${picture}" />
				{{/if}}
				<div class="attachment-data">
					<p class="name"><a href="${link}" target="_blank">${name}</a></p>
					<p class="caption">${caption}</p>
					<p class="description">${description}</p>
				</div>
			</div>
		{{/if}}
	</div>
	<p class="meta">${created_time}  
	{{if comments}}
		${comments.count} Comment{{if comments.count>1}}s{{/if}}
	{{else}}
		0 Comments
	{{/if}}  
	{{if likes}}
		${likes.count} Like{{if likes.count>1}}s{{/if}}
	{{else}}
		0 Likes
	{{/if}}
	</p>
</li>
</ul>
		</script>
		<script src="fbwall/js/jquery.tmpl.min.js"></script>
		<script src="fbwall/js/script.js"></script>





So with that said, I'm having issues splitting each instance of news post into individual carousel instances, as well as the date format. It shows something such as "5 hours ago, 13 days ago, etc" but I would rather it say MMDDYYYY.

Any help or guidance is greatly appreciated! Thanks for reading.

Is This A Good Question/Topic? 0
  • +

Replies To: Custom Facebook feed on website using javascript / css / pagination

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 08:21 AM

I think you will have to change the date your self.
But this may help you with the limit and pagination
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 08:28 AM

This may also help with the date.
Was This Post Helpful? 0
  • +
  • -

#4 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 09:07 AM

Thanks for your help. I was able to change the date last night by modifying these lines:

graphPOSTS = 'https://graph.facebook.com/'+options.id+'/posts/?access_token='+options.access_token+'&callback=?&date_format=r&limit='+options.limit;


Changing the &date_format=U to something else makes it readable by humans.

Adding this line also works as well as removing the function to convert time and the function call associated to time:

console.log(this.created_time);

Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 09:18 AM

The date_format takes the same parameters as php does.
Was This Post Helpful? 0
  • +
  • -

#6 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 09:40 AM

View Postlaytonsdad, on 18 June 2013 - 09:18 AM, said:

The date_format takes the same parameters as php does.


It sure does. The only issue I'm having now, date related, is: Tue, 18 Jun 2013 08:06:28 +0000. I'm not interested in the 08:06:28 +0000, unless I can convert it to something local perhaps. Removing it in general would be best though.
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 09:58 AM

You may want to use replace()
date_format=D, M j Y
shows like this
{
  "created_time": "Sat, Dec 15 2012", 
  "id": "19292868552_522414651110169"
}

This post has been edited by laytonsdad: 18 June 2013 - 10:39 AM

Was This Post Helpful? 1
  • +
  • -

#8 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 10:40 AM

Not sure if you are aware of the Facebook Graph API Explorer but that is what I used to test this.
Was This Post Helpful? 1
  • +
  • -

#9 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 01:23 PM

Thanks a ton! I'll mess around with the API explorer, it's a pretty useful tool. I wasn't aware that I could have spaces in the url but I guess I can, huh? I got it to work as it should. Now comes the hard part, pagination. Limiting the current script to post 10 news items before it populates a new page with 10 more, and so on. I don't fully understand how pagination works in terms of implementing javascript into its functionality. I'll read up on it though and post here again when I figure it out.
Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 03:04 PM

I think this is what you are looking for:
fields=posts.limit(10)&pageing=cursor



Then in the response you will get a link for before and after.

"paging": {
      "previous": "https://graph.facebook.com/1097441106/posts?limit=10&since=1371580092", 
      "next": "https://graph.facebook.com/1097441106/posts?limit=10&until=1367425315"
    }


Was This Post Helpful? 0
  • +
  • -

#11 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 04:27 PM

View Postlaytonsdad, on 18 June 2013 - 03:04 PM, said:

I think this is what you are looking for:
fields=posts.limit(10)&pageing=cursor



Then in the response you will get a link for before and after.

"paging": {
      "previous": "https://graph.facebook.com/1097441106/posts?limit=10&since=1371580092", 
      "next": "https://graph.facebook.com/1097441106/posts?limit=10&until=1367425315"
    }



That would go in the graph url?

graphPOSTS = 'https://graph.facebook.com/'+options.id+'/posts/?access_token='+options.access_token+'&callback=?&date_format=l, F d, Y&limit='+options.limit;


or is this referring to the javascript code?

options = $.extend({
			limit: 15	// You can also pass a custom limit as a parameter.
		},options);


This handles 15 posts when the script is called. Sorry, I just don't understand the implementation method.
Was This Post Helpful? 0
  • +
  • -

#12 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 04:47 PM

graphPOSTS = 'https://graph.facebook.com/'+options.id+'/posts/?access_token='+options.access_token+'&callback=?&date_format=l, F d, Y&limit='+options.limit+'&pageing=cursor';



Try replacing with this. I added +'&pageing=cursor' to the end so it will know the paging type.

This should get you the paging you want.

In the response you will now have a paging object to get the urls from.
Was This Post Helpful? 0
  • +
  • -

#13 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 04:57 PM

So you understand, (sorry if you already know)

when doing a graph search you are sending a get request to the graph.facbook.com page. When you add things inside the url called the query string you are sending parameters to the graph api.

The graph api will then calculate what you want from your query string and send you a json object response.
Was This Post Helpful? 0
  • +
  • -

#14 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 05:13 PM

+'&pageing=cursor' so this allows the Facebook API to separate feed content into multiple pages? From the basic example on this website: http://alloyui.com/e...les/pagination/ is exactly how I'm trying to load content within the current div, replacing the old news posts.
Was This Post Helpful? 0
  • +
  • -

#15 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 424
  • View blog
  • Posts: 1,807
  • Joined: 30-April 10

Re: Custom Facebook feed on website using javascript / css / pagination

Posted 18 June 2013 - 05:40 PM

In your link I believe that they are using the offset method as described here.

I have no knowledge of the library you are using but to sum it up using the method I posted (cursor):

You will make a get request using your graph api search. This search will return a result object of posts and the post objects, one of which is the paging object. The paging object returns the previous and next urls for a graph search. You can then use these urls for your next search. to get a new set of post objects as a response.

I hope I haven't confused you.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2