How to Display Facebook Albums and Photos on Your Website

Easily embed Facebook photo albums and images on your website using Graph API or plugins. Step-by-step guide to showcase Facebook content seamlessly.

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:

  1. 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>

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

  3. 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"
    });
    });

  4. 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: [],

  5. 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,

  6. 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

How to Decode HTML Entities Using jQuery?

Learn how to decode HTML entities in jQuery using smart and efficient methods. Includes working examples and cross-browser techniques.

When working with dynamic HTML content, you might encounter special characters represented as HTML entities (e.g., &lt; for <, &gt; for >). These are essential for rendering text safely in browsers, but sometimes you may need to convert them back to their original characters — a process known as decoding.

In this article, we’ll explore how to decode HTML entities using jQuery in a simple and effective way.

Why Decode HTML Entities?

Most of the browsers convert certain characters into HTML entities to avoid rendering issues or XSS attacks. For example:

  • < becomes &lt;
  • > becomes &gt;
  • & becomes &amp;
  • " becomes &quot;

If you’re extracting or manipulating HTML content through JavaScript or AJAX, you may receive entity-encoded strings. To properly display or process them, you’ll need to decode these entities to a readable format.

jQuery Method to Decode HTML Entities

jQuery itself doesn’t provide a direct function to decode HTML entities, but you can use the browser’s native HTML parsing capability by leveraging a temporary DOM element like textarea.

Example Code:

function decodeHtmlEntities(encodedStr) {
    return $('<textarea/>').html(encodedStr).text();
}

// Usage
var encoded = '&lt;p&gt;Hello World!&lt;/p&gt;';
var decoded = decodeHtmlEntities(encoded);

console.log(decoded); // Output: <p>Hello World!</p>

Explanation:

  • $('<textarea/>') creates a temporary <textarea> element.
  • .html(encodedStr) sets the HTML content with entities.
  • .text() extracts the decoded plain text.

This approach is safe and works across all modern browsers.

Alternative Vanilla JavaScript Method

If you prefer using plain JavaScript without jQuery, here’s an equivalent solution:

function decodeHtmlEntities(encodedStr) {
    var txt = document.createElement('textarea');
    txt.innerHTML = encodedStr;
    return txt.value;
}

// Usage
var decoded = decodeHtmlEntities('&amp;copy; 2025');
console.log(decoded); // Output: © 2025

This is same example in Vanilla Javascript.

Use Case Examples

Below are some examples to demostrate the usage of decodeHtmlEntities function.

Example 1: Decoding API Response

If your API is giving response in HTML entities, you can use this function to decode it.

$.get('/get-description', function(data) {
    var decoded = decodeHtmlEntities(data.description);
    $('#description').text(decoded);
});

Example 2: Decoding User Input Stored with Entities

Sometimes, we store user input data in the database with HTML encoded string. We can use this function to decode HTML entities.

var userInput = '&lt;script&gt;alert(&quot;Hi&quot;)&lt;/script&gt;';
$('#output').text(decodeHtmlEntities(userInput));

Conclusion

Decoding HTML entities is essential when you’re dealing with encoded data from the server or other sources. Using jQuery’s ability to manipulate DOM elements, you can easily decode entities without additional libraries.

This simple technique ensures that your content is displayed correctly, improving both functionality and user experience.