FooBox was the first responsive lightbox plugin and the first to introduce a social sharing layer. When we released FooBox more than five years ago, the social network landscape looked much different than it does today. We’re happy to report that FooBox Pro has gotten a massive update to its social sharing codebase that keeps it on the leading edge but also allowed us to introduce some snazzy new features.

Keeping up with changes on networks like Facebook and Twitter are hard. This is especially true when it comes to developing solutions that rely upon these networks and the seemingly constant changes they make in how developers access certain features. If you’ve been supporting any kind of social sharing in your own product or your clients, you know it can be difficult to keep up.

Why Social Sharing Has Been Updated

Social sharing has been updated to work around the issue of networks like Facebook and Google+ removing the ability to reliably share a single image from a gallery within a page.

The reason we say reliably is that with a lot of networks their old sharing APIs actually supported sharing single images. The URL of the link you clicked contained all the information for the actual share such as the image URL, title, description, etc. Unfortunately, the new APIs that are now replacing the older ones rely on a different method of getting the information to share. With the new method you provide just a URL to share, no other details, then the network crawls the URL looking for <meta/>  tags that provide the details for the share.

While this works great for the majority of shares, it does remove the ability to share just a single image from within a gallery as the <meta/> tags must exist in the markup for the page for just the image currently being shared. So the <meta/> tags basically need to change for every possible shared URL in the gallery, this is just not feasible.

Never mind that many people use caching plugins which generate static versions of dynamic pages to improve load times and having to change the <meta/> tags each time would result in having to clear the cache as well for that page.

Our Solution

To work around this limitation we now listen for the social networks crawlers and if the URL being shared is a FooBox URL we serve up a dynamically created page containing all the correct <meta/> tags for the individual image.

In short what this means for the user is that now when sharing images from within FooBox these networks will be provided the correct details for the image.

Leading Edge API Usage

This change also allows FooBox to use the latest versions of the various sharing APIs which offer features that were not available in the old APIs. As an example of one of the newer features available, using Facebooks old API would only allow you to share to your own Timeline, with this update you can now choose to share on:

  • your own Timeline
  • a friend’s Timeline
  • in a Group
  • in a Private Message.
lightbox in gallery

New FooBox Features

The four sharing locations above open a world of possibility for the social sharing of your images, videos and other media from FooBox. In addition, there are also other improvements that have been made to sharing.

Bitly

Basic Bitly integration has been implemented that allows shared urls to be shortened.

Notes:
Requires a Bitly Generic Access Token which can be generated from the following url, https://bitly.com/a/oauth_apps, once you have an account with a verified email address.

Facebook

1. Sharing images now reliably fetches the correct thumbnail, title, and description.
2. Sharing videos now allow for the video to be played in the Timeline with a link back to your site.

Notes:
A Facebook APP ID can be supplied in the settings, this is not required for sharing but allows tracking of shares.

Twitter

1. Sharing images now uses the summary_large_image card to display a thumbnail directly in tweets once your site has been whitelisted.
2. Sharing videos now uses the summary_large_image card to display a thumbnail that links back to the video on your site once your site has been whitelisted.

Notes:
To get your site whitelisted you need to copy the URL provided in the FooBox social settings and use it in the Twitter Card Validator at https://cards-dev.twitter.com/validator.

Google+

1. Sharing images now reliably fetches the correct thumbnail, title, and description.
2. Sharing videos now displays the thumbnail, title, and description with a link back to your site.

Pinterest

1. Sharing images now supports rich pins once your site has been validated.
2. Sharing videos now supports rich pins but shares the thumbnail with a link back to your site once it has been validated.

FooBox PRO with Social Sharing
FooBox PRO

Notes:
To get your site validated you need to copy the URL provided in the FooBox social settings and use it in the Pinterest Rich Pin Validator at https://developers.pinterest.com/tools/url-debugger/.

The full list of supported networks is below.
* Facebook
* Google+
* Twitter
* Pinterest
* LinkedIn
* Buffer
* Reddit
* Digg
* Tumblr
* StumbleUpon