Welcome to CM Social Connect’s documentation!

This documentation gives you instruction how to install and setup CM Social Connect on your Joomla! website.

Contents:

Overview

CM Social Connect is a social authentication component for Joomla! CMS, it gives Joomla! users ability to authenticate via social networks. Come with CM Social Connect component are a login module and some plugins which requires for the component to run.

At the present time there are 3 popular social networks supported:

  • Facebook
  • Twitter
  • Google+

CM Social Connect is different to other social authentication Joomla! extensions, it doesn’t provide “one-click” registration feature, users still need to choose their usernames, passwords, or provide their emails when signing up, no auto-generated username and no random password. CM Social Connect also has an option to manage connected social networks inside Joomla! standard user profile.

If Joomla! standard registration/login and Joomla! standard profile are still important to your site, CM Social Connect could be useful.

Install & update

Download

You can download CM Social Connect from Github.

Install

Installation is very easy, you just need to upload the package via Extension Manager. After installing the package, you need to enable some plugins and configure the component, please see the next sections for details.

Update

You receive update notification in your Joomla! website when there is a new version of the plugin available, you just need to follow the instructions from Joomla! to update the plugin.

You can also go to Github, download the new version and upload it via Extension Manager, just like the way you install.

Component

After you install the package of CM Social Connect, you can find the component CM Social Connect in “Components” menu in your back-end.

_images/component_menu.jpg

By default you see the dashboard when you access the component.

_images/component_dashboard.jpg

To configure the component, you click the “Options” button on the right side of the toolbar.

_images/component_configuration_basic.jpg

There are 3 options:

  • Load Font Awesome: CM Social Connect requires Font Awesome. If Font Awesome is already loaded by another extension (for example, your template), you set this option to “No”, otherwise you should set to “Yes”.
  • Load CSS: Load CSS of CM Social Connect which contains some styles for login and register buttons to make them more beautiful. If you don’t load CSS, your template CSS will be used.
  • Show in Users component’s profile: Show connection info in Users component’s profile view and connect/disconnect options in Users component’s profile form.

User plugin

In your back-end, go to Extensions -> Plugin Manager, search for “User - CM Social Connect”.

_images/user_plugin_list.jpg

This plugin is used to integrate with Users component of Joomla!. This plugin doesn’t have any option, you just need to enable it.

System plugin

In your back-end, go to Extensions -> Plugin Manager, search for “System - CM Social Connect”.

_images/system_plugin_list.jpg

This plugin is used to add social registration and login buttons to Registration and Login pages of Users component of Joomla!. This plugin doesn’t have any option, you just need to enable it.

Login module

Joomla! already has a login module, because we can not add login buttons to this module automatically, we buil copyied Joomla! login module to a new module called “CM Social Connect - Login”. This module works the same way as Joomla! login module, there are only 2 differences:

  • CM Social Connect’s login module has a layout for Bootstrap 3. If you use a Bootstrap 3 template, you don’t need to override the module’s layout to convert its HTML to Bootstrap 3.
  • CM Social Connect’s login module has social login buttons at the bottom.

When you install the package of CM Social Connect, CM Social Connect login module is also installed and created. In your back-end, you go to Extensions -> Module Manager, look for “CM Social Connect - Login”.

_images/login_module_list.jpg

Edit the module, you can see it has the same options of Joomla! login module, there is a new option “Bootstrap version” for selecting what Bootstrap version is used in the module.

_images/login_module_edit.jpg

If you publish the module on your front-end and you haven’t configured any social networks yet, then you will not see social login buttons, it just looks like Joomla! login module.

Facebook integration

To enable Facebook integration in CM Social Connect, first you need to create a Facebook application.

Go to https://developers.facebook.com/, under menu item “My Apps” you click “Add a New App”.

_images/facebook_config_1.jpg

Select “Website” in the popup.

_images/facebook_config_2.jpg

Enter your application name and click “Create New Facebook App ID”.

_images/facebook_config_3.jpg

Select a category, click “Create App ID” button.

_images/facebook_config_4.jpg

Enter the URL of your Joomla! website and click “Next”.

_images/facebook_config_5.jpg

Now you see a “Finished!” message at the bottom of the page.

_images/facebook_config_6.jpg

You scroll to the top of the page, click “Skip Quick Start” button on the right side to access your new application’s configuration quickly.

_images/facebook_config_7.jpg

In the Dashboard of your application, you click “Show” button of App Secret to see the app secret.

_images/facebook_config_8.jpg

Enter your Facebook password.

_images/facebook_config_9.jpg

Now you can see your app secrect. You need to enter your app ID and app secret on your Joomla! site.

_images/facebook_config_10.jpg

In your back-end, go to Extensions -> Plugin Manager, search for “CM Social Connect - Facebook integration” plugin.

_images/facebook_plugin_list.jpg

Edit the plugin, you set “Status” to “Enabled”, enter the app ID and app secret you see in your Facebook application dashboard.

_images/facebook_plugin_edit.jpg

Save the plugin. Go to your site’s front-end, now you can see the Facebook icons in registration form, login form and login module.

Login form:

_images/facebook_config_login.jpg

Registration form:

_images/facebook_config_registration.jpg

Login module:

_images/facebook_config_module.jpg

Twitter integration

To integrate with Twitter, you go to https://apps.twitter.com/ to create an application.

Click “Create New App”.

_images/twitter_config_1.jpg

Provide the required information. Ensure you also enter your site URL in Callback URL field, otherwise callback will be disabled and you will get error when connecting to Twitter.

_images/twitter_config_2.jpg

After your app is created, click “Keys and Access Tokens” tab to get API key and API secret.

_images/twitter_config_3.jpg

Consumer key (or API key), consumer secret (API key) are the values you need to enter in your Twitter Joomla! plugin.

_images/twitter_config_4.jpg

In your back-end, go to Extensions -> Plugin Manager, search for “CM Social Connect - Twitter integration” plugin.

_images/twitter_plugin_list.jpg

Edit the plugin, you set “Status” to “Enabled”, enter the API key and API secret of your Twitter application.

_images/twitter_plugin_edit.jpg

Save the plugin. Go to your site’s front-end, now you can see the Twitter icons in registration form, login form and login module.

Login form:

_images/twitter_config_login.jpg

Registration form:

_images/twitter_config_registration.jpg

Login module:

_images/twitter_config_module.jpg

Google+ integration

To support Google login, you need to have a Google Developers project.

Go to https://console.developers.google.com/, click “Create Project” button to create a new project.

_images/googleplus_config_1.jpg

Give your project a name.

_images/googleplus_config_2.jpg

After your project is created, on the left menu you go to APIs & auth -> Credentials, click “Create new Client ID button”.

_images/googleplus_config_3.jpg

Select “Web application” as “Application type”.

_images/googleplus_config_4.jpg

Select an email address and enter product name.

_images/googleplus_config_5.jpg

Enter your site URL in “Authorized JavaScript origins” option. For “Authorized redirects URIs” option you need to enter 3 URLs:

http://yoursite.com/index.php?option=com_cmsocialconnect&task=registration.socialRegister&network=googleplus
http://yoursite.com/index.php?option=com_cmsocialconnect&task=login.socialLogin&network=googleplus
http://yoursite.com/index.php?option=com_cmsocialconnect&task=connect.socialConnect&network=googleplus
_images/googleplus_config_6.jpg

Click “Create Client ID”, you can find your client ID and client secret in APIs & auth -> Credentials.

In your back-end, go to Extensions -> Plugin Manager, search for “CM Social Connect - Google+ integration” plugin.

_images/googleplus_plugin_list.jpg

Edit the plugin, you set “Status” to “Enabled”, enter the client ID and client secret of your project.

_images/googleplus_plugin_edit.jpg

Save the plugin. Go to your site’s front-end, now you can see the Google+ icons in registration form, login form and login module.

Login form:

_images/googleplus_config_login.jpg

Registration form:

_images/googleplus_config_registration.jpg

Login module:

_images/googleplus_config_module.jpg

Registration

In registration form of Users component, there are social network buttons, you need to click to connect to one of these social networks before registering a new Joomla! account.

_images/googleplus_config_registration.jpg

After clicking one of the social network buttons, you are taken to this social network to authorize.

Facebook:

_images/facebook_auth.jpg

Twitter:

_images/twitter_auth.jpg

Google+:

_images/googleplus_auth.jpg

After authorizing, you are taken back to the registration form, the form could look similar to this:

_images/facebook_register.jpg

Your information like in the selected social network are filled into the form automatically, you can change them if you want. After proving missing information like password, you register as usual. If your registration is successful, you are logged in automatically and your new Joomla! account is connected to the selected social network, you can now login with this social network account.

Note:

  • Username is generated automatically from your information on the connected social network.
  • Twitter doesn’t provide email address of user, so if you connect to Twitter you will see empty email address fields in the registration form.

Login

After connecting to a social network and registrating a new account, you can now log into your site with the social network account you connect.

In the login form of Users component and in the CM Social Connect login module, you can click on the social network buttons to login without entering username and password.

Login form:

_images/googleplus_config_login.jpg

Login module:

_images/googleplus_config_module.jpg

Manage connections

Administrators

In your Joomla! back-end, you can see the list of connections of users to social networks.

_images/component_connections.jpg

You can select specific connections and click “Delete” button to delete them.

Registered users

If you set “Show in Users component’s profile” option in the component’s configuration to “Yes”, user can see his connected social networks in his profile

_images/user_profile_view.jpg

When editing his profile, user can connect to new social networks or remove connections for connected social networks.

_images/user_profile_edit.jpg

After connecting to a new social network, he can log into the site by using this new social network’s account. If remove a connection, he can’t login with this social network any more.

If you don’t want to display social network info in user profile but still want to give your users ability to manage their connections, you can create a menu item for “User’s connections” from CM Social Connect component.

_images/user_connections.jpg

Indices and tables