AddThis - Labs

What are social sign in buttons?

Social sign in buttons allow your visitors to easily connect with your site. You'll receive user data that you can send to a registration database or other application. We also provide tracking analytics so you can see how your visitors are using these buttons.

Visitors sign in

You get data

We provide analytics

How do I get started?

Configure your API keys. Enter your API keys on the Get the Code section.
Grab code & paste into your site. Copy the button code (you must be signed in) and paste into your site.
Apply the user data. Design customized experiences, connect your registration system, or use our sample app.

Get the Code

1. Enter your API Keys

Select which services you want to use. You'll need to get an API key from each of these services in order to use their connection on your site.

Login to your Facebook developer account.
Create a new project or select one that you've created before.
Copy the project's "App ID/API key" and paste it into the field above.
In the app settings page, fill in the field "Website with Facebook Login Site URL" to:
https://www.addthis.com/secure/ssi_callback

Log in to your Google developer account.
Create a new project or select one that you've created before.
Select API Access tab on left menu
If you created a new project, fill out the basic details and make sure to specify "Web application" for Application Type and then click "more options"
next to "Your site or hostname" and set "Authorized Redirect URIs" to: https://www.addthis.com/secure/ssi_callback?isNewGen=false
https://www.addthis.com/secure/ssi_callback?isNewGen=true
If you have an existing project, find the section "Client ID for web applications".
Click "Edit settings..." and set the "Authorized Redirect URIs" field to: https://www.addthis.com/secure/ssi_callback?isNewGen=false
https://www.addthis.com/secure/ssi_callback?isNewGen=true
Finally, copy the "Client ID" to the field above.

2. Get the Code

This code will display the buttons on your page and return the data from the service, along with a welcome message.

Note: does not include registration, database or cookie management.

						
<div class="addthis_toolbox">
</div>
<script>
var addthis_config = {
 	login:{
		services:{
		},
		callback:function(user){
			/* Output user properties -- in your real app, you'd get rid of these*/
			console.log(user.addthis_signature);
			console.log(user.thumbnailURL);
			console.log(user.service);
  		}
 	}
};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid="></script>

Try it!

Connect through one of the services on the left to see the data you'll receive.

Download the Example

If you don't have a registration system or application to make use of social sign in or user information, you can use the files in this sample app to set up a basic registration system.

Download from Github

What's included in the example?

Sign in page

A page with standard login form as well as AddThis Sign In Buttons. Registered users can also sign in with username and password, and connect a social media account later.

Registration page

A page with a standard registration form. Users can register here and connect their social media account later.

Dashboard page

A generic page to display social data for a single user. It automatically displays the user's profile URL, picture, name, locale, and the service used to sign in.

MySQL Database

A database with two tables:users and user_social_login. Stores login and signature details for all registered users.

Social Sign In