Responsive facebook style fetching content, image and video from url on the fly using Twitter Bootstrap, PHP and Jquery

Now we are going to implement Facebook like external content sharing which means extracting content from url , embed videos from url and show image from image website url like Flickr. I have written common class to do these things and it covers following websites based on category(website, video website, image website).

It covers following areas


  • Youtube
  • Vimeo
  • Metacafe
  • Dailymotion


  • imgur
  • flickr
  • twitpic
  • deviantart
  • instagram


It fetch the contents from any URL.

Also it contains Facebook style video expending

These third-party has it’s own API to get the content. For example to get the youtube video details you must use the following url and it returns json output

So all third-party has similar type method to access for details. So kindly look on it or see  demo files consist of one class for extract the content for reference


1.Get Youtube video Id from URL

2. Get Vimeo Video Id from URL

3. Get Metacafe Video Id from URL

4. Get DailymotionVideo Id from URL

Image websites also giving like this type of API for getting details for image URL.

Here is Jquery code to identify the URL from text area and call the getContents.php to grab the external content.

getContents.php internally call the MediaExtracterHandler to extract the external content. See it in demo.

I hope it’s quite useful one. Don’t forget to share this.

Thank you. Have a good day.

Demo and Download