Integrate the “Connect with Viadeo” button and users can login with their Viadeo details to access personalised features. By clicking “Allow” members will authorise your site or app to access their profile information and their professional graph.
Example (see code below)
Click on the button below to see the demo:
Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Some css stuff -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Our Viadeo Connect button with"oauth" id attribute -->
<img src="img/connectwithviadeo.png" alt="Connect with Viadeo" title="Connect with Viadeo" id="oauth" />
<!-- An empty div to contain our visitcard -->
<div id="visitcard"></div>
<!-- Loading the sdk and calling VD.init() method. -->
<script src="http://cdn.viadeo.com/javascript/sdk.js"></script>
<script>
(function() {
VD.init({
apiKey: '[your client id]',
status: true,
cookie: true
});
/* Visitcard sample code */
var visitcard = document.getElementById('visitcard'); // Our visitcard container
var button = document.getElementById('oauth'); // Our trigger
function calls() {
/* First call is "/me" to retrieve the basic info of the user */
VD.api('/me', function(r) {
/*
The html of our visitcard using the data return via the API call
Check out the documentation to see the structure of the returned JSON
*/
visitcard.innerHTML= '<div class="media"><div class="imgRight"><img src="'+r.picture_large+'" alt="" title="'+r.name+'" /></div><div id="contact" class="bd"><h1>'+r.name+'</h1><p>'+r.headline+'</p><small id="contacts">'+r.contact_count+' contacts</small></div></div><h3><a href="'+r.link+'" target="_blank">View my profile</a></h3>' ;
/* Some css arrangements */
visitcard.setAttribute('class', 'shadow');
visitcard.style.border ='1px solid #ccc';
button.style.display ='none';
});
/* Second call is "/me/contacts" with the "user_detail" parameter set to partial to retrieve the picture of the user's contact */
VD.api('/me/contacts', {user_detail : 'partial', limit : 12}, function(r) {
var contacts = document.createElement('div');
/* Filling the contacts container div */
for( var i=0; i<r.data.length; i++ ) {
contacts.innerHTML += '<span class="contact"><a href="'+r.data[i].link+'" title="'+r.data[i].name+'" target="_blank"><img src="'+r.data[i].picture_small+'" alt="" /></a></span>';
}
document.getElementById('contact').appendChild(contacts);
});
}
/* The calls() function is called when a click event is fired on our trigger */
button.onclick = function(){
/* VD.getLoginStatus() check wheter the user is logged or not and then executes our callback function. */
VD.getLoginStatus(function(r) {
if (!r.session) {
VD.login(function(r) {
if(r.session){
calls();
}
});
} else {
calls();
}
});
};
})();
</script>
</body>
</html>