Idea Melt

Focus Mode

Apps

Follow

Description

The Follow app provides a consistent and easy way to create follow buttons on your site. Anything that is a user in your IdeaMelt account can be followed or unfollowed very easily using this simple app.

Features

Follow makes your life easy.

  • Takes care of making API requests from the client
  • Checks to see if the user is being followed on initialization
  • Adds and removes unstyled classes as appropriate to make your life easier
  • Automatically communicates with itself to live update all follow buttons for the same user when only one has been clicked
  • Optimizes network requests for maximum efficiency and least amount of data sent over the wire
  • Allows for infinite buttons on the page with only simple HTML
  • Can be used on any valid HTML element except for <select> and <input>
Scripts

Include the following script in your HTML

<script src="http://www.ideamelt.com/static/apps/3.0/im.follow.js"></script>

NOTE: jQuery is dependency

Initialize

To initialize Follow, all you need to do is execute the init function with your IdeaMelt API Key.

IdeaMelt.Apps.Follow.init('API_KEY')

Please make sure you do this as soon as possible. Don't worry, the library takes care of document.ready

HTML

The library uses custom data-attributes to select buttons and get data.

<div data-ideamelt="follow" data-user-to-follow="URL" data-user-url="URL" data-title="STRING"></div>

NOTE: All elements must be present in the DOM when the page loads. They cannot be added programmatically via jQuery or JavaScript after pageload. You CAN however programmatically change the value of 'user-to-follow', 'user-url', and 'title' post pageload. Make sure you run the init() function again if you change something.

data-ideamelt
required
follow
this is what the library uses to identify elements as follow buttons
data-user-to-follow
required
URL of the user that will be/is being followed
data-user-url
optional
URL of the user that will do/is doing the following. If this is undefined, the library will assume this to be the currently logged in user.
You can absolutely have some elements on the page where this is explicitly defined and others where it is not (hence, assumed to be the logged in user)
data-title
optional
title of the person being followed/unfollowed
If this has been defined, the library will automatically append this string to the button text. Therefore, instead of saying "Follow", it will say "Follow John Doe".
Styling

The library itself imposes no styling on any of the buttons. Combined with the ability to use it on any HTML element, you get significant power and flexibility. There are three classes that the library uses to identify states for the button

im-follow Used when the action string is "Follow". Implies that the user IS NOT currently being followed
im-unfollow Used when the action string is "Unfollow". Implies that the user IS currently being followed
im-disabled Used when the the library is sending AJAX requests and click events on the button have been disabled