These instructions are for installing the fluxgain Like button widget on a HTML web page, please read the FAQ before proceeding. To get up and running quickly with the default settings you can paste the following HTML snippet into a web page

<div class="fluxgain-like-button" style="overflow:hidden;"></div>
<script type="text/javascript">
  (function() {
    var fl = document.createElement("script");
    fl.type = "text/javascript";
    fl.async = true;
    fl.src = "https://chatter.fluxgainlike.com/js/flike.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(fl, s);
  })();
</script>

 

The above code creates a like button that will like the current page, current title, be orange and have a right wide layout.

Alternatively for more customisation of the like button widget follow the instructions below

  • Decide which like widget you want to use
  • Add a reference to an external JavaScript library
  • Creating like button with alternative colour and layout
  • Change default url and title to be liked

1. Decide which like widget you want to use

All widgets provide a button with the word like and a plus sign on it. In addition to this is either the "connect to salesforce" button or like count. If you have not connected to salesforce the "connect to salesforce" button with appear, if you are connected the like count will appear.

  • the like button can be either "orange" or "black"
  • the like count / connect can be "right" or "top" relative to the like button
  • the like count / connect can be either "wide" or "short"
    • if "wide" the words "connect to salesforce" will appear on the button when not connected
    • if "short" then a question mark ("?") will appear on the button when not connected
Different fluxgain Like buttons

Different fluxgain Like buttons

 

This gives 8 different like widgets to choose from with varying size dimensions. From top to bottom (and left to right)

  • orange / right / wide
  • black / right / wide
  • orange / right / short
  • black / right /short
  • orange / top / wide
  • black / top / wide
  • orange / top / short
  • black / top / short

 

To add the widget into a web page insert the following HTML where the widget is to appear.

<div class="fluxgain-like-button" style="overflow:hidden;"></div>

Depending on which widget you wish to use it will automatically be resized accordingly

  •  orange or black "right" "wide" widget will have a width of 190 pixels and height of 23 pixels
  • orange or black "right" "short" widget will have a width of 115 pixels anf height of 23 pixels
  • orange or black "top" "wide" widget will have a width of 67 pixels and height of 76 pixels
  • orange or black "top" "short" iwidget will have a width of 60 pixels and height of 57 pixels

The following javascript snippets create the like widget and place it into the above <div></div> tags (using a iframe for extra security).

2. Add external JavaScript library

Insert the following javascript into the HTML page

<script type="text/javascript">
  (function() {
    var fl = document.createElement("script");
    fl.type = "text/javascript";
    fl.async = true;
    fl.src = "https://chatter.fluxgainlike.com/js/flike.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(fl, s);
  })();
</script>

This external javascript library reference should be put towards the end of the HTML file just before the closing </body> tag and after the <div></div> tags in step 1.

3. Creating like button with alternative colour and layout

Optionally the buttons colour and layout can be changed by adding some attributes to the div tag, below are the combinations that can be used.

After the above javascript add the following to your HTML depending on which like widget you have choosen

  • orange / right / wide
<div class="fluxgain-like-button" style="overflow:hidden;"></div>
  • black / right / wide
<div class="fluxgain-like-button" data-colour="black" style="overflow:hidden;"></div>
  • orange / right / short
<div class="fluxgain-like-button" data-layout="right_short" style="overflow:hidden;"></div>
  • black / right / short
<div class="fluxgain-like-button" data-colour="black" data-layout="right_short" style="overflow:hidden;"></div>
  • orange / top /wide
<div class="fluxgain-like-button" data-layout="top_wide" style="overflow:hidden;"></div>
  • black / top / wide
<div class="fluxgain-like-button" data-colour="black" data-layout="top_wide" style="overflow:hidden;"></div>
  • orange / top / short
<div class="fluxgain-like-button" data-layout="top_short" style="overflow:hidden;"></div>
  • black / top / short
<div class="fluxgain-like-button" data-colour="black" data-layout="top_short" style="overflow:hidden;"></div>

 

4. Change default url and title to be liked

In most circumstances the default url and title will not need to be changed, however some intranet and web applications may need to be changed if the web page does not generate the same url every time.

For example

  • an unique session/tracking id may be passed in on the url specific to a certain user
  • extra query parameters may be passed in on the url that are not required and may be different on subsequent calls
  • characters may be in lower or upper case on subsequent calls

In order to create a canonical url and title the like button can call a javascript variable that can be added to the div tag to change its values. This is done by adding the attribute data-config to the div tag and the name of the javascript variable.

<div class="fluxgain-like-button" data-config="fluxgainLikeConfig" data-colour="black" style="overflow:hidden;"></div>

 

The javascript variable is in the form of

 <script type="text/javascript">
  var fluxgainLikeConfig =
  {
    url: window.location.href.replace(/^http:\/\//i, 'https://'),
    title: document.title
  };
</script>

 

The default url in the above example is changed to ensure the liked page is https not http.