https://github.com/michael-lynch/instagram-lite

A simple, lightweight jQuery plugin used to display a user's Instagram photos.
https://github.com/michael-lynch/instagram-lite

Last synced: 10 days ago
JSON representation

A simple, lightweight jQuery plugin used to display a user's Instagram photos.

• Host: GitHub
• URL: https://github.com/michael-lynch/instagram-lite
• Owner: michael-lynch
• License: mit
• Created: 2014-05-15T15:39:20.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2018-03-05T16:57:48.000Z (over 6 years ago)
• Last Synced: 2024-03-23T12:10:50.165Z (8 months ago)
• Language: JavaScript
• Size: 55.7 KB
• Stars: 126
• Watchers: 14
• Forks: 44
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-jquery - instagram-lite - A simple, lightweight jQuery plugin used to display a user's Instagram photos. (Images / Data Table)

README

        
# Instagram Lite

A simple, lightweight jQuery plugin used to display a user's Instagram photos and videos.

*Note that you must be the owner of the Instagram account being displayed and that Instagram only allows you to show up to 20 pieces of media.*

See a demo

### Important Read

**This plugin requires a valid `access_token` issued by Instagram. To get an access token, login to the [Instagram Developer](https://www.instagram.com/developer/) site, create an app and hit this URL in your browser (replace `CLIENT-ID` with your client ID and `REDIRECT-URI` with your  redirect URI):**

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token&scope=public_content

Instagram will redirect you to your redirect URL with the access token appended to it. It should look like this:

https://myredireturi.com?access_token=1730464.199554e.e561d1b801d74e35a1453110a44a09e8

Copy the `access_token` in the URL. This is what you'll need to use the plugin.

## Instructions

Include jQuery and the plugin in the head or footer of your page.

```html

```

Create a list with an ID or class that will contain the user's Instagram photos.

```html



```


Initialize the plugin targeting the class, ID or element and pass the function your access token.

```js

$('.instagram-lite').instagramLite({

	accessToken: 'XXXXXXXXXXXXXXXXXXXXX'

});

```

#### Required Properties





accessToken: string


A string that defines your access token provided by Instagram.





#### Optional Properties



user_id: string


A string that defines a user ID (not username). Note that the user must be registered as a Sandbox user in your client. (default: 'self').



limit: integer


An integer that indicates the amount of photos to be returned. If loadMore is set, the limit property will determine how many photos are loaded each time. (default: 10).



list: boolean


A boolean value that indicates whether or not to use list items (default: true).



urls: boolean


A boolean value that indicates whether or not the images should be linked to their page on Instagram (default: false).



videos: boolean


A boolean value that indicates whether or not videos should be displayed (default: false). *Note that videos are .mp4 and currently only work in webkit.



captions: boolean


A boolean value that indicates whether or not the photo captions should be displayed (default: false).



date: boolean


A boolean value that indicates whether or not the date of when the photo was taken should be displayed (default: false).



likes: boolean


A boolean value that indicates whether or not the photo like count should be displayed (default: false).



comments_count: boolean


A boolean value that indicates whether or not the photo comment count should be displayed (default: false).



error: function()


A callback function that is triggered after the request if the request is not successful.



success: function()


A callback function that is triggered after the request if the request is sucessful.





##### Example:

```js

$(function() {

	$('.instagram-lite').instagramLite({

		accessToken: 'XXXXXXXXXXXXXXXXXXXXX',

		list: false,

		urls: false,

		success: function(data) {

			console.log(data);

		},

		error: function(data) {

			console.log(data);

			$('.instagram-lite').remove();

		}

	});

});

```