techworkshop, Author at Techno Workshop

Display Facebook Albums and Photos On Your Website

Facebook Album Browser is a Reponsive jQuery plugin for browsing public albums and photos from any Facebook account and showcases them as a photo gallery on your website. Albums are displayed with respective cover photos. Click on the cover photo to display all the photos under the album. Click on any photo opens the lightbox with next/prev buttons to navigate.

The main purpose of this plugin is to embed and customize Facebook photo albums in your website without being limited with Facebook styling. It also allows you to use it as picker as it raises events for clicked album/photo.

Plugin is compatible for both desktop and mobile websites.

How to Use:

Load Facebook Album Browser plugin right after the jQuery library as shown below.

<link rel="stylesheet" href="src/jquery.fb.albumbrowser.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/jquery.fb.albumbrowser.js"></script>

Create a container element in body of the page to display the Facebook Album Browser.
```
<div class="fb-album-browser"></div>
```

Call Facebook Album Browser in above container element and provide Facebook account to display albums as below.

$(document).ready(function () {
  $(".fb-album-browser").FacebookAlbumBrowser({
    account: "starsportsindia"
  });
});

Use other options listed below to customize Facebook Album Browser plugin.

// Facebook account
account: "",

// Facebook access token
accessToken: "",

// Display account information
showAccountInfo: true,

// Display the number of images
showImageCount: true,

// Skip albums which have no images
skipEmptyAlbums: true,

// An array of albums to be skipped
skipAlbums: [],

// switching on/off lightbox
lightbox: true,

// Allows using of plugin as an image multipicker.
photosCheckbox: true,

// An array of photos to be checked
checkedPhotos: [],

Use events listed below to perform specific actions on specific user action.

// when album is selected in the browser.
albumSelected: null,

// when photo is selecetd in the browser.
photoSelected: null,

// when photo is selecetd in the browser. 
photoChecked: null,

// when photo is checked. 
photoUnchecked: null,

Every event function returns an object with following properties:

id: image id in Facebook database
url: large image url
thumb: thumbnail image url

Download: https://github.com/dejanstojanovic/Facebook-Album-Browser

Demo: http://demo.technoworkshop.in/facebook-album-browser/

Using experimental feature: HTML5 Conformance Checker

The warning “Using experimental feature: HTML5 Conformance Checker.” means that the validator is checking your markup as HTML5. It doesn’t mean that there is anything wrong with the code. But W3C hasn’t accepted HTML5 as a standard, so validator provides a warning for that, because HTML5 standard is not complete yet. So it is recommended to validating with doctype of “HTML 4.01 Strict”.

For more information about Recommended list of Doctype declarations, visit this link.

Get Response Header from file_get_contents in PHP

file_get_contents() is the preferred way to read the contents of a file into a string. It will use memory mapping techniques if supported by your OS to enhance performance.

A URL can be used as a filename with this function if the fopen wrappers have been enabled.

But, reading URL becomes difficult to identify that URL is not available. And if URL is not available, it’s also difficult to process that URL. So, it is necessary that there is a response for every request fired by file_get_contents() for any URL.

PHP has a predefined variable named $http_response_header, which provides a response header for any HTTP request sent by PHP code.

For Example,

file_get_contents("http://example.com");
var_dump($http_response_header);

The above example will output something similar to:

array(9) {
  [0]=>
  string(15) "HTTP/1.1 200 OK"
  [1]=>
  string(35) "Date: Sat, 12 Apr 2008 17:30:38 GMT"
  [2]=>
  string(29) "Server: Apache/2.2.3 (CentOS)"
  [3]=>
  string(44) "Last-Modified: Tue, 15 Nov 2005 13:24:10 GMT"
  [4]=>
  string(27) "ETag: "280100-1b6-80bfd280""
  [5]=>
  string(20) "Accept-Ranges: bytes"
  [6]=>
  string(19) "Content-Length: 438"
  [7]=>
  string(17) "Connection: close"
  [8]=>
  string(38) "Content-Type: text/html; charset=UTF-8"
}

Note that the HTTP wrapper has a hard limit of 1024 characters for the header lines.
Any HTTP header received that is longer than this will be ignored and won’t appear in $http_response_header.

The cURL extension doesn’t have this limit.

Different YouTube video thumbnail URLs

To get the different thumbnails of embedded video from YouTube, use these image URLs for different dimensions,

1) For medium sized thumbnail image
http://i.ytimg.com/vi/<YouTube Video ID>/0.jpg

2) For small sized thumbnail image

http://i.ytimg.com/vi/<YouTube Video ID>/1.jpg http://i.ytimg.com/vi/<YouTube Video ID>/2.jpg http://i.ytimg.com/vi/<YouTube Video ID>/3.jpg

3) For large or maximum sized thumbnail image

http://i.ytimg.com/vi/<YouTube Video ID>/maxresdefault.jpg

4) For High Definition Image

http://img.youtube.com/vi/<YouTube Video ID>/hqdefault.jpg

In above URLs, provide <YouTube Video ID>. To get Video ID from YouTube URL,

Go to http://www.youtube.com
Play any video
Copy an alphanumeric string followed by v= from URL

This is a Video ID of currently playing video.

For example:

Video ID of YouTube Video https://www.youtube.com/watch?v=ny8ngucMd_U is ny8ngucMd_U

Use this video ID in above thumbnail URLs to get different thumbnail image of this video.

Find YouTube Video ID from YouTube URL

YouTube has so many types of URLs to embed the video on your site. Sometimes it’s difficult to find a single regular expression to parse all type of YouTube URL and retrieve the video ID from it.

To retrieve the video ID from the YouTube URL, use this function,

function getVideoID($url) {
    $pattern = '#^(?:https?://)?(?:www\.)?(?:youtu\.be/|youtube\.com(?:/embed/|/v/|/watch\?v=|/watch\?.+&v=))([\w-]{11})(?:.+)?$#x';
    preg_match($pattern, $url, $matches);
    return (isset($matches[1])) ? $matches[1] : false;
}

Regular Expression explanation is as follows,

$pattern = '#^(?:https?://)?';    # Either http or https.
$pattern .= '(?:www\.)?';         #  Optional, www subdomain.
$pattern .= '(?:';                #  Group host alternatives:
$pattern .=   'youtu\.be/';       #    Either youtu.be,
$pattern .=   '|youtube\.com';    #    or youtube.com
$pattern .=   '(?:';              #    Group path alternatives:
$pattern .=     '/embed/';        #      Either /embed/,
$pattern .=     '|/v/';           #      or /v/,
$pattern .=     '|/watch\?v=';    #      or /watch?v=,    
$pattern .=     '|/watch\?.+&v='; #      or /watch?other_param&v=
$pattern .=   ')';                #    End path alternatives.
$pattern .= ')';                  #  End host alternatives.
$pattern .= '([\w-]{11})';        # Youtube video ids with standard length of 11 chars.
$pattern .= '(?:.+)?$#x';         # Optional other ending URL parameters.