Smartbuttons
With one click you can share content from your website with Hyves-Friends and with Hyves in general. This way you can generate extra traffic and reach more people with your own services.
Smartbuttons allows webmasters to have some Hyves integration with very little effort.
We support the following Smartbuttons which you can add to your website:
- Tip this on Hyves
Send-To-Friends- Blog this on Hyves
Put this photo/video on HyvesI Am There!- Become a member of this Spot/Hyve
- Add this interest to your Hyves profile
Place this advertising on Hyves- Add this gadget on Hyves
Implementation Types
There are two ways of including the required Javascript in your webpage:
- Synchronous
- Asynchronous
Synchronous
Will not work with "application/xhtml+xml" doctype, see Asynchronous loading instead
The Synchronous is the easiest way, but least fault tolerant. It requires you to include a javascript file in the <head>, which will use a document.write to include another Javascript. This method will fail if you're using the "application/xhtml+xml" doctype. Also, in the unfortunate event that Hyves servers might be down/slow/not responding, your page will likely throw some errors.
Include the .js file in the html, like so:
<head> ... <script type='text/javascript' src='http://www.hyves.nl/precompiled/hyvesconnect.js'></script> ... </head>
Wherever the webmaster wants to place a Hyves Smartbutton, he needs to place this:
<script type='text/javascript'>Hyves.connect.tip({title: 'This is the title.', body:'This is the body.', category:'12'});</script>
Asynchronous
If you plan on loading Smartbuttons asynchronously, you will have to include a javascript file at the time the onload or ondomready event is fired. This method will work if you're using XHTML and allows you to load any other content, before the Smartbuttons. Even if our servers would be down, the rest of your page should have finished loading already. Now, you will need to know when the Smartbutton javascript file has finished loading. We do not (maybe in the future) perform a callback, you are responsible for making sure the Hyves.connect object actually exist. You can achieve this by periodically checking if the Hyves (Hyves.connect specifically) object exists. Some well known Javascript libraries (Prototype, jQuery etc.) have methods for this (PeriodicalExecuter?, at_intervals etc.).
You can include the Javascript file like so:
<html>
<head>
<script type='text/javascript'>
function prepare(){
// load the javascript file
var headElt = document.createElement("script");
headElt.src = 'http://www.hyves.nl/precompiled/hyvesconnect_async.js', headElt.type = "text/javascript";
document.getElementsByTagName("head").item(0).appendChild(headElt);
}
</script>
</head>
<body onload="prepare();">
<!-- content -->
</body>
</html>
Wherever the webmaster wants to place a hyves button, he needs to place this:
<script type='text/javascript'>Hyves.connect.tip({title: 'This is the title.', body:'This is the body.', category:'12'});</script>
This will output a button, using document.write. By specifying the title and body values, they will be pre-filled in the popup.
All parameters need to be javascript escaped.
To actually make this work you need, as mentioned, to add a interval check. The code below can give you an idea on how you can manage this. Other solutions are also possible offcourse.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Getting started with Hyves Smartbuttons</title> <script type='text/javascript'> var intervalId; function prepare(){ // load the javascript file var headElt = document.createElement("script"); headElt.src = 'http://www.hyves.nl/precompiled/hyvesconnect_async.js', headElt.type = "text/javascript"; document.getElementsByTagName("head").item(0).appendChild(headElt); // schedule a check at 100msec interval intervalId = window.setInterval('defer()',100); } function defer(){ // check if the Hyves object is available if(typeof Hyves != 'undefined'){ // clear the interval (no more checks) window.clearInterval(intervalId); // create the tip button Hyves.connect.tip({title: 'This is the title.', body:'This is the body.', category:'12'}, null, 'placeholder'); } } </script> </head> <body onload="prepare();"> Hello World Asynchronous <span id='placeholder'></span> </body> </html>
Available methods
These methods accept a javascript object for prefilling fields in the form, and either a dom node or an element id. The button will be placed inside the element if node/id is specified.
Please note: when using the node parameter, the function must always be called in a 'onload' or 'ondomready', otherwise chances are that IE will throw errors.
blog
blog([opt_params[, options[, node/id]]])
opt_params:
- title <string>
- body <string>
options:
see defaults().
tip
tip([opt_params[, options[, node/id]]])
opt_params:
- title <string>
- body <string>
rating <integer> (values [1-5])- category <integer> (values [1-10, 12])
- 1 - Restaurant
- 2 - Club
- 3 - Music
- 4 - Movie
- 5 - Book
- 6 - Game
- 7 - Art
- 8 - Travel
- 9 - Shops
- 10 - Other
- 12 - Website
options:
see defaults().
widget
widget([opt_params[, options[, node/id]]])
opt_params:
- title <string>
- body <string>
options:
see defaults().
interest
interest(params[, options[, node/id]])
params:
- interest <string>
options:
see defaults().
hub
hub(params[, options[, node/id]])
params:
- hub_id <integer>
options:
see defaults().
close
close()
Will remove any currently visible Smartbutton iFrame from the document, effectively closing the 'popup'
submit
(private, but exposed)
submit(id)
defaults
defaults(options)
options:
- iconsize <integer> (values [16,24])
Set default options for all buttons, currently only iconsize is supported.
The a tags that are drawn on the page actually call the submit a form with variables to Hyves. The id is just a 0-based sequence, to uniquely identify the buttons.
