jQuery Plugin To Create Photo Stream Feeds From Various Networks - Social Image Feed

Social Image Feed is a jQuery plugin which fetches and displays photo steam feeds from various networks: Instagram, Tumblr, WeHeartIt, Pinterest, Flickr, DeviantArt and Behance.

How to use it:

1. Load the Font Awesome 4 for social icons (OPTIONAL).

<link href="/path/to/font-awesome.min.css" rel="stylesheet">

2. Build the HTML structure for the image feed.

<div id="image-feed">

  <!-- Instagram -->
    <i class="fa fa-instagram"></i>
    <div id="instagram-feed"></div>

  <!-- Tumblr -->
    <i class="fa fa-tumblr"></i>
    <div id="tumblr-feed"></div>

  <!-- WeHeartIt -->
    <i class="fa fa-heart"></i>
    <div id="weheartit-feed"></div>

  <!-- Pinterest -->
    <i class="fa fa-pinterest"></i>
    <div id="pinterest-feed"></div>

  <!-- Flickr -->
    <i class="fa fa-flickr"></i>
    <div id="flickr-feed"></div>

  <!-- DeviantArt -->
    <i class="fa fa-deviantart"></i>
    <div id="deviantart-feed"></div>

  <!-- Behance -->
    <i class="fa fa-behance"></i>
    <div id="behance-feed"></div>

</div>

3. Load jQuery library and the jquery.sif.js script at the end of the document so the pages load faster.

<!-- JQuery -->
<script src="//code.jquery.com/jquery.min.js"></script>
<!-- SIF JS -->
<script src="js/jquery.sif.js"></script>

4. Active the plugin as follows:

$('#image-feed').SIF({
  instagramID: '',
  instagramHook: 'instagram-feed',
  tumblrID: '',
  tumblrHook: 'tumblr-feed',
  weheartitID: '',
  weheartitHook: 'weheartit-feed',
  pinterestID: '',
  pinterestHook: 'pinterest-feed',
  flickrID: '',
  flickrHook: 'flickr-feed',
  deviantartID: '',
  deviantartHook: 'deviantart-feed',
  dribbbleID: '',
  dribbbleHook: 'dribbble-feed',
  behanceID: '',
  behanceHook: 'behance-feed',
});

5. Style the plugin whatever you like:

#image-feed {
  padding: 15px;
  background-color: #333;
}

#image-feed .fa {
  font-size: 24px;
  display: inline-block;
  background-color: #444;
  color: #777;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  width: 100%;
}

#image-feed ul {
  list-style: none;
  margin: 10px;
  padding: 0;
  margin: 5px -5px;
}

#image-feed ul:after {
  content: "";
  display: table;
  clear: both;
}

#image-feed ul > li {
  width: 10%;
  float: left;
  padding: 5px;
}

#image-feed ul > li > a { display: block; }

#image-feed ul > li > a > .feed-image {
  width: 100%;
  padding-bottom: 100%;
  background-size: cover;
  border-radius: 5px;
}

6. Show a "no image" image if no image can be returned:

$('#image-feed').SIF({
  noThumb: 'img/no-thumb-200x200.jpg'
});

7. Open links in a new window/tab.

$('#image-feed').SIF({
  newWindow: true
});

8. Limit the maximum number of results.

$('#image-feed').SIF({
  numResults: 10
});

Change log:

2017-07-11

• JS & CSS update

---

This awesome jQuery plugin is developed by NicotineLL. For more Advanced Usages, please check the demo page or visit the official website.