Wednesday, 24 July 2013

How To Login Using LinkedIN in Javascript

How To Login Using LinkedIN in Javascript ? 
How To Login To Website Using LinkedIN in Javascript ?
How To Login To Website Using LinkedIN in Asp.Net ?
How To Add Linkedin Login Button To Website ?


Step:1-

Step:2-
 Click On ApiKeys





















Step:3-

Click On Add New Application










Step:4-

Fillup The Form





















Step:5-



















Step:6-
Add the following Javascript code to your webpage

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: fqvj3fbvjt0
onLoad: onLinkedInLoad
authorize: true
</script>
<script type="text/javascript">
function onLinkedInLoad() {
IN.Event.on(IN, "auth", onLinkedInAuth);
}
function onLinkedInAuth() {
     IN.API.Profile("me")
.fields(["id","firstName","lastName","pictureUrl","headline","industry","email-address","picture-urls::(original)"])
  .result(function(result) {
var indata=result.values[0];
      $('#in_name').text(indata.firstName +' '+indata.lastName);
 $('#in_cmpny').text(indata.industry);
 $('#in_deg').text(indata.headline);
$('#in_img').attr("src",indata.pictureUrls.values[0]);
$('#in_logout').show();
    });
}
$(document).ready(function(){
$('#in_logout').click(function(){
IN.User.logout();
$('#in_name').text("User Name");
 $('#in_cmpny').text("Company Name");
 $('#in_deg').text("Designation");
$('#in_img').attr("src","image/user.png");
$('#in_logout').hide();
});});
</script>

<div style="margin:5px;" ><script type="in/Login"></script></div>
    <a href="#" style="display:none;" id="in_logout">LogOut</a>
<div style="width:600px;height:300px;border:1px solid #FB8938;float:left;display:block;">
        <div style="float:left;display:block;height:300px; width:300px;margin:0 auto;" >
            <img  id="in_img" height="300" width="300" src="image/user.png" />
        </div>
        <div style="float:left;display:block;width:300px;height:300px;overflow:hidden">
<div id="dv_result" style="float:left;display:block;width:280px;height:200px;margin:80px 0 0 10px;display:none;">
                <ul style="list-style:none;" class="linkedin_class">
                    <li id="in_name" style="list-style-image:url('image/User-icon.png');">
                        User Name
                    </li>
                    <li id="in_cmpny" style="list-style-image:url('image/company_icon.png');">
                        Company Name
                    </li>
<li id="in_deg" style="list-style-image:url('image/user_logo.png');">
                        Designation
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <style>
    .linkedin_class > li
    {-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; 
-khtml-border-radius: 10px;
list-style: none;
padding:10px;
margin:2px;
font-style:italic;
font-weight:bolder;
color:#FB8938;
        }
    </style>

Reference linkedin-javascript-api-soup-to-nuts

1 comment:

  1. This is an informative blog. Keep it up. I am looking forward to this kind of blog. I took a lot away from this blog. also, your thoughts were very well organized as far as how you went into details and made it very. Thanks
    visit site

    ReplyDelete