Have you ever wanted your visitors to login to your WordPress site using their Facebook or Twitter accounts? That’d be cool wouldn’t it? Looking all professional and stuff? Well, buddy in today’s your lucky day. I’m going to show you how to create individual apps for Twitter, Facebook and Google to enable social sign-in via these channels. I must warn you that the process is a bit complicated, but the results are, to say the least, sweet.
First off you’re going to have to install and activate the AddThis Social Sign In plugin. Next we’ll learn how to create web applications for the 3 major social media channels. Finally you need to copy-paste the ID codes of the apps in the AddThis Social Sign In Settings page, to get the ball rolling. Alternately you can skip the plugin installation part for last, and do the hard ones first. Nonetheless, the end results are the same – it depends on how you want to do it. So let us begin:
How to create a Twitter app for social sign-in?
To create a Twitter app, follow the steps mentioned below:
- Login to your Twitter Developer account
- Create a new application and enter the following details:
- Name: You application name can be anything. For simplicity, you can enter your site’s name – MySmartSite.com
- Description: A couple of words. Here’s some if you have a brainfreeze: “Social Sign-In for my WordPress site via AddThis”
- Website: Your site’s URL, typically http://www.mysmartsite.com
- Callback URL: https://www.addthis.com
- Once done, tick the checkbox, fill in the captcha and hit “Create your Twitter Application”
- This creates your Twitter application.
Next, click on the new Twitter app you just created, and head over to the ‘Settings’ page. Scroll down to ‘Application Type’ and check the last box which reads: “Allow this application to be used to Sign in with Twitter”. Once done, update the changes you made.
Then, copy the “Consumer key” and “Consumer secret” and paste it in the AddThis Social Sign-In settings page, under Twitter. Save the changes, and you’ll have successfully added Twitter support to your site.
How to create a Facebook app for social sign-in?
Creating a Facebook app is pretty straightforward. Here’s how to get it done.
Settings for a new Facebook app
- Login to your Facebook Developer account and click on ‘Create New App’
- Enter the details as shown in the pic above.
- Just make sure to use lowercase in the ‘App Namespace’ and to choose the ‘Category’ wisely.
- Click on ‘Continue’, enter the captcha in the next phase and your app should be created.
- Once your app is created, you’ll automatically be redirected to its settings page, where you’ll have to edit the following:
Facebook App Settings
- Under ‘Basic Info’, look for ‘Sandbox Mode’ and select the ‘Disabled’ option. This ensures that your app is visible/ usable to all users.
- Look for a checklist that reads “Website with Facebook Login” and click on the tick symbol.
- The checklist should expand revealing an entry called ‘Site URL’.
- Under ‘Site URL’ type: https://www.addthis.com/secure/ssi_callback
- Click on ‘Save Changes’
This should enable site login through Facebook via the app we just created. Now you should copy the ‘App ID’ (numeric value) and not ‘App Secret’ (alphanumeric value) and paste it under ‘Facebook App ID’ in the plugin’s settings page.
How to create a Google app for social sign-in?
Some people prefer to keep their social media profiles away from public view, which is why you should have a “Sign in via Google” option in your site. The following steps show you how to create a Google app which will enable Google sign-in in your site.
- Login to your Google Developer account and click on Create Project. If you already have a project, I would still recommend creating a new one, for simplicity.
- Once done, click on ‘API Access’ on the left menu, followed by “Create and OAuth client ID”.
- Next, follow the images below to create a new Google App.
Using Social Sign-In
Once you’ve successfully created all the apps and pasted the respective IDs, update the changes in the AddThis Social Sign-In (SSI) settings page. Now, Google, Twitter and Facebook login options should show up in your WordPress login page. (For our tutorial, I’ve just enabled Google and Twitter).
If you would like to place the login buttons in a widget or anywhere in your site, simply paste the code:
<?php addthis_ssi();?>
in the respective places in your template.
How to use AddThis Social Sign In inside widgets?
If you’d like to use the sign-in buttons in a widget, you’ll need to be able to execute PHP codes inside the widget. WordPress doesn’t allow executing PHP codes inside widgets for obvious security purposes. Thankfully, the PHP Code Widget plugin helps you do so. Simply download and install the plugin and head over to Appearance > Widgets. You should find a new widget called ‘PHP Code’. Drag and drop it in your preferred location and paste the code <?php addthis_ssi();?> inside it and save changes.
You should now find the social sign-in buttons in your widget location.
Conclusion
One of the cons of using social sign-in buttons inside your theme is that your page load time slightly increases. Moreover, the setup procedure is a bit complicated compared to the rest of the plugins out there.
On the up side, using this plugin certainly adds to the professional feel of your website. Also, it makes commenting on posts, a breeze and dismisses the need for 3rd party comment plugins. Using the old school comment system (where the comments are safe in your WordPress database) decreases load time, and has a positive impact on SEO.
If you would like to explore simpler alternatives, then I would suggest Disqus, CommentLuv or Livefyre. There are some of the most popular WordPress comment plugins in the market.
5 Comments
Hi Sourav,
I have installed this plugin and it works perfectly from the wp-admin path but not anywhere in the website
Please give me a suggestion
Hi Charsail,
Make sure you’ve activated and setup the plugin as shown in the tutorial. You should be not logged in to your WordPress site when you want to test the plugin.
So sign out of your WP dashboard, and enter the URL:
yousite.com/wp-login.php
That should do the trick!
Excellent things entirely, you just acquired a new company logo fresh audience. What might an individual advocate with regards to your post that you designed at times before? Any certain?
звезди естради
Sourav,
great post. Could you advise further on how I can add the AddThis SSI code:
to enable a user to register on my site?
I was thinking of creating a registration page, and from what I’ve read I thought that would perhaps capture the user details of who has registered via social media and feed it to my AddThis account. Have I understood this correctly?
BTW, I am not a wordpress coder, and am learning as I go, being an ex-cobal programmer, many, many, years ago.