Categories
codeofaninja.com

Changelog: Facebook Videos Script

This blog post is a “changelog†of our Facebook Videos Script found in this page: How To Display Facebook VIDEOS On Your Website We think that a source code changelog looks better on a webpage than on a text file. One main reason is the syntax highlighting. Also, this changlog will make it easier for […]

CHANGELOG-display-facebook-videos-on-website

This blog post is a “changelog†of our Facebook Videos Script found in this page:

How To Display Facebook VIDEOS On Your Website

We think that a source code changelog looks better on a webpage than on a text file. One main reason is the syntax highlighting.

Also, this changlog will make it easier for people to find out if there’s any changes with the our code.

Possible reasons for a source code update:

Facebook Graph API updates, extra script features and performance enhancements.

PRO Version

* Version 1.0

1. Shows exact number of likes and comments.
Changed in items_template.php around lines 54-62.

2. Added a linkify jquery plugin.
Put the plugin file in your directory and load it in your page like this (after jquery):

<!-- linkify -->
<script src="libs/js/jquery.linkify.min.js"></script>

3. AJAX load likers and commenters.
In index.php file, on click event of ‘.like-count-sum’ code was changed to:

$(document).on('click', '.like-count-sum', function(){
	
	// load likers and commenters		
	var pid=$(this).attr('pid');
	var show_elem=$(this).closest('.col-lg-6').find('.like-count-data');
	
	if(show_elem.is(":visible")) {
		// hide it
		show_elem.hide();
	}
	
	else{
		// show likers and comments if they are already loaded
		if (show_elem.html().length > 0) {
			show_elem.show('fast');
		}
		
		else{
			// show it
			show_elem.html("<img src='images/ajax-loader-like-comment.gif' />");
			show_elem.show();
			
			// get likers and commenters
			$.post('likes_comments.php', { 
				post_id: pid
			}, function(data){
				show_elem.html(data);
						
				// make urls clickable in user comments
				$('.like-count-data').linkify();
			});
		}
	}
});

4. Added new file called likes_comments.php
This is used to load some likers name and commenters name, their profile pics and actual comments.

5. Updated API URLs to v2.4
Affected URLs are in the $json_link variable of: index.php and likes_comments.php

6. Added a “util.php” file in libs/php/ directory.
This is used for common custom functions.

7. Change description HTML in items_template.php
It will look like the following code now:

echo "<div class='description'>";
	echo $util->getNewStringWithMentions($description);
echo "</div>";

8. URLs in video description now clickable.
Add the following code inside the $(document).ready(function(){…

$('.description').linkify();

9. Added debug code
The following code were added in index.php, items_more.php, items_template.php and likes_comments.php for debugging purposes.

// show any kind or errors
error_reporting(E_ALL);
ini_set('display_errors', 1);

10. Added info.php file
This is also for easy debugging purposes.

11. Added a catch for file_get_contents() fail
This is to prevent your access token from being displayed on the page, just in case it returns an error.

All “file_get_contents” part will look like the following. Affected files include index.php, items_more.php, and likes_comments.php

$json = @file_get_contents($json_link);

if($json===FALSE) {
	die("Unable to get data.");
}

else{
	// rest of the code
}

Version 1.0

1. Upload videos on your Facebook page, watch them on your website.
2. Save time figuring out and coding these features on your website.
3. Display video list from your Facebook page.
4. Display video title. If none, display video number.
5. Display video description.
6. Post date with “time ago†format.
7. Display Facebook page name (with link) for each video. (opens in new tab)
8. Bootstrap enabled script.
9. Responsive layout. (great for mobile devices)
10. Display number of likes.
11. Display number of comments.
12. Display some likers and link to their profiles.
13. Display commenters and link to their profile.
14. Display user comments.
15. Show or hide comment animation when clicked.
16. Load more events automatically when scrolling.
17. Newly loaded content still has video controls, number of likes, etc.
18. Will say “All videos were loaded.†when there’s no content to be loaded.
19. Free source code updates.
20. Free email support.

Leave a Reply

Your email address will not be published. Required fields are marked *