JavaScript Implementation

This section is for using our implementation of the API via JavaScript

You don't have to use our implementation, we have enough documentation to show you what URL you need to CURL/Ajax to get the data you want

Jump To:

API Reference
Implementation Examples

Demo

Requirements:

You need to include our script file and our div where content will go

JavaScript file is 2.1 KB, our CSS is 776  Bytes


<script async src="http://www.anisos.com/js/anisosFeed.min.js"></script>
<div id="anisosFeed" data-feed="test"></div>

Customisation

Add data attribute tags to the Anisos div to specify additional parameters for our implementation.

See the table below for reference, and see the list at the bottom of the page for example divs


Parameter Example(s) Explanation
data-feed data-feed="test"
Required
This is your feed's handle, you can see the handle(s) for your feed(s) on your dashboard
data-anisos-style data-anisos-style="true"
Recommended
Auto load accepts any value, but for good practice you should specify true/false.
This adds the Anisos styles to your page, making it look like our demo.
data-auto-load data-auto-load="true"
Recommended
Auto load accepts any value, but for good practice you should specify true/false.
This turns on the infinite scroll feature (Where it loads in more as you scroll down)
data-columns data-columns="5" The Columns parameter specifies how many columns of social items
data-search data-search="funny" The search parameter is for searching the content of social items, currently only able to accept one search term at one time
data-amount data-amount="50" Amount is the amount of social items you want, currently limited to 100 at a time
data-page data-page="1"
data-page="2"
Page is for pagination, we provide the next page to you in the response if you have showStats parameter passed through
data-source data-source="facebook"
Or multiple sources
data-source="facebook,youtube"
Source is to specify which social source you want your results to be from (e.g YouTube, Facebook, Google Plus)

Available Values

  • facebook
  • googleplus
  • youtube
data-type data-type="photo"
Or multiple sources
data-type="photos,videos"
Types are the different types of social items, Photos, Videos and Posts are the potential types

Available Values

  • photos
  • videos
  • posts
data-show-stats data-show-stats="true"
Highly Recommended*

Show stats only takes the boolean value of "true"

Show stats returns data in an array like format which consists of potentially 6 keys

  • errorWarning - Displays errors which aren't fatal, or aren't considered fatal
  • response - Displays "ok" or "no data"
  • totalResults - The amount of results available for the query performed, not the amount returned
  • pagination - Provides URLs for the next resultset or the previous resultset for the query performed
  • searchTerms - Provides data for your query performed, just so you know whether the query made was what you were after
  • items - This array holds all of the results from the query

*Required for much easier pagination

data-enforce-images data-enforce-images="true"

Enforce Images only takes the boolean value of "true"

Enforce images only makes the API only return items which have a photo (in a valid format - can't guarantee this to be 100% effective)

Customisation Examples

Full example:

<div id="anisosFeed" data-feed="test" data-search="cheese" data-amount="50" data-page="1" data-source="facebook" data-type="videos,photos,posts" data-show-stats="true" data-columns="5" data-anisos-style="true" data-enforce-images="true" data-auto-load="true"></div>

Recommended example:

<div id="anisosFeed" data-feed="test" data-search="" data-amount="20" data-page="1" data-type="photos" data-show-stats="true" data-columns="5" data-anisos-style="true" data-enforce-images="true" data-auto-load="true"></div>

Mild customisation example

<div id="anisosFeed" data-feed="test" data-search="" data-amount="20" data-show-stats="true" data-columns="5" data-anisos-style="true" data-enforce-images="true" data-auto-load="true"></div>

Low customisation

<div id="anisosFeed" data-feed="test" data-search="" data-anisos-style="true" data-enforce-images="true" ></div>

Bare minimum example:

<div id="anisosFeed" data-feed="test"></div>