Social Sign On

Developer

Laisvunas

3rd Party (Commercial)


EE Version Support

  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Module

Tags

'Enables to login and register to ExpressionEngine website using popular social networks such as Facebook, Twitter, Google, LinkedIn, Yahoo, vKontakte, AOL, Foursquare, OpenId etc. Allows you to grab much info about user from his social account. Based on Hybridauth library. Social Sign On is compatible with popular Zoo Visitors add-on. When a new member registers to the website using Social Sign On a new entry will be automatically created in Zoo Visitors channel for that member. Contains custom extension hooks, i.e. can be extended to match exactly to your needs.

INSTALLATION FOR EE2.0+

1) Unzip downloaded files.

2) Upload the directory “social_sign_on” to /system/expressionengine/third_party on the server.

3) Upload another “social_sign_on” directory to /themes/third_party on the server.

4) Go CP Home > Add-ons > Modules, find “Social Sign On” in modules list and click “Install”.
Then select both module and extension and click “Install”.

5) Read how to set particular sign on services at http://hybridauth.sourceforge.net/userguide.html.
About setting up OpenId read here in docs the section SETTING UP OPENID.
Then click the link “Social Sign On” and fill the form.

6) Create template group “technical”. Go Templates > Global template preferences and set that templates should be saved as files.
Then copy contents of “example_templates” folder into system/expressionengine/templates/default_site/technical.group on the server. Now you should see
example templates in template manager.

NOTICE. Providers Yahoo and AOL might not work correctly on servers having “open_basedir” enabled.
Disable “open_basedir” if you need login/register using Yahoo or AOL.

SETTING UP OPENID

OpenId settinds have several optional fields not present in options of other identity providers.

1) The field “OpenId URL template” allows by using variable “{unique_id}” to predefine OpenId URL;
the user will be able to enter only the part of URL marked by that variable. E.g. the value of this
field can be “http://{unique_id}.livejournal.com”; the user will need to enter only his blog name instead of full URL.

2) The field “Heading to match OpenId URL template” - allows to define the text of the heading which
will be displayed instead of default OpenId heading inside widget (see USAGE EXAMPLE 4: PROVIDERS WIDGET). E.g. if the value of the field “OpenId URL template” is
“http://{unique_id}.livejournal.com”, then the value of the field “Heading to match OpenId URL template” can be
something like “Enter your Livejournal ID”.

3) The field “Title to match OpenId URL template” - allows to define the title of OpenId provider which will be outputted
inside widget (see USAGE EXAMPLE 4: PROVIDERS WIDGET) and by variables {social_sign_on_provider_title} and {social_sign_on_connected_provider_title}.

The values of these OpenId settings can be overridden by the values of the parameters of certain tags (more details in
sections describing relevant tags):

1) The value of the field “OpenId URL template” can be overridden by the value of “openid_url_template” parameter of
exp:social_sign_on:html tag.

2) The value of the field “Heading to match OpenId URL template” can be overridden by the value of “openid_url_heading” parameter of
exp:social_sign_on:html tag.

3) The value of the field “Title to match OpenId URL template” can be overridden by the value of “openid_title” parameter of
the following tags: exp:social_sign_on:html, exp:social_sign_on:providers_list, exp:social_sign_on:providers_form, exp:social_sign_on:userdata.

THE TAG {exp:social_sign_on:html}

This is *single* tag.

I. Parameters

1) icon_folder - optional. Allows you to specify the folder in which icons of social networks are stored.
Possible values are “16x16”, “24x24”, “32x32”, “48x48”, “64x64”. Default value is “48x48”.

2) providers - optional. Allows you to specify social networks using which one cane login into website.
Possible values are “facebook”, “twitter”, “google”, “linkedin”, “yahoo”, “openid”, “myspace”, “foursquare”,
“aol”, “live” (means Windows Live). To specify several social networks use pipe operator. Default value of this parameter is list of
all social networks enabled in settings form.

3) popup - optional. Allows you to specify if social network’s login form should be displayed in popup window or in the same window.
Possible values are “yes” and “no”. Default is “yes”.

4) openid_url_template - optional. Allows you allows by using variable “{unique_id}” to predefine OpenId URL;
the user will be able to enter only the part of URL marked by that variable. Since curled braces aren’t allowed inside
parameter value, they should be encoded. Use string “:LD:” to encode the left brace and the string “:RD:” - to encode the right brace.
E.g. the value of this parameter can be “http://:LD:unique_id:RD:.livejournal.com”; the user will need to enter only his blog name instead of full URL.
The value of this parameter will override the value of OpenId settind field “OpenId URL template”;

5) openid_url_heading - optional. Allows you to define the text of the heading which
will be displayed instead of default OpenId heading inside widget (see USAGE EXAMPLE 4: PROVIDERS WIDGET). E.g. if the value of the field “OpenId URL template” is
“http://{unique_id}.livejournal.com”, then the value of the field “Heading to match OpenId URL template” can be
something like “Enter your Livejournal ID”. The value of this parameter will override the value of OpenId settind field “Heading to match OpenId URL template”;

6) openid_title - optional. Allows you to define the title of OpenId provider which will be outputted
inside widget (see USAGE EXAMPLE 4: PROVIDERS WIDGET).

II. Variables

No variables.

THE TAG {exp:social_sign_on:providers_list}

This is *tag pair*.

I. Parameters

1) icon_folder - optional. Allows you to specify the folder in which icons of social networks are stored.
Possible values are “16x16”, “24x24”, “32x32”, “48x48”, “64x64”. Default value is “48x48”.

2) providers - optional. Allows you to specify social networks using which one cane login into website.
Possible values are “facebook”, “twitter”, “google”, “linkedin”, “yahoo”, “openid”, “myspace”, “foursquare”,
“aol”, “live” (means Windows Live). To specify several social networks use pipe operator. Default value of this parameter is list of
all social networks enabled in settings form.

3) class - required. Allows you to specify HTML “class” attribute of each link to social network’s login form.

4) template_url - required. Allows you to specify URL leading to the template where you placed exp:social_sign_on:html tag.

5) return_to - optional. Allows you to specify URL of the page where user should be redirected after successfull login via social network.
Default value is URL of the current page.

6) popup - optional. Allows you to specify if social network’s login form should be displayed in popup window or in the same window.
Possible values are “yes” and “no”. Default is “yes”.

7) openid_title - optional. Allows you to define the title of OpenId provider which will be outputted
by variable {social_sign_on_provider_title}.

II. Variable pair social_sign_on_providers

This variable pair is used to delimit the portion of code which will be iterated for each social network.

III. Variables

1) social_sign_on_provider_name - outputs lowercase name of social network.

2) social_sign_on_provider_title - outputs name of social network starting from capital letter.

3) social_sign_on_provider_icon - outputs URL of social network icon.

4) social_sign_on_provider_url - outputs URL used to connect with social network.

THE TAG {exp:social_sign_on:providers_form}

This is *tag pair*.

I. Parameters

1) icon_folder - optional.  Allows you to specify the folder in which icons of social networks are stored.
Possible values are “16x16”, “24x24”, “32x32”, “48x48”, “64x64”. Default value is “48x48”.

2) providers - optional. Allows you to specify social networks using which one cane login into website.
Possible values are “facebook”, “twitter”, “google”, “linkedin”, “yahoo”, “openid”, “myspace”, “foursquare”,
“aol”, “live” (means Windows Live). To specify several social networks use pipe operator. Default value of this parameter is list of
all social networks enabled in settings form.

3) form_element_name - required. Allows you to specify the name of the form element whose value holds the name of selected social network.

4) template_url - required. Allows you to specify URL leading to the template where you placed exp:social_sign_on:html tag.

5) return_to - optional. Allows you to specify URL of the page where user should be redirected after successfull login via social network.
Default value is URL of the current page.

6) form_id - optional. Allows you to specify HTML “id” parameter of the form element. Default value is “providers_form”.

7) form_class - optional. Allows you to specify HTML “class” parameter of the form element. Default value is “providers_form”.

8) form_name - optional. Allows you to specify HTML “name” parameter of the form element. Default value is “providers_form”.

9) no_provider_alert_text - optional. Allows you to specify text of the javascript alert which will be displayed in case no social network has been selected.
Default value is “ERROR! No sign-on provider selected.”.

10) javascript_alert - optional. Allows you to specify if javascript error alert should be displayed in case no social network has been selected.
Possible values are “yes” and “no”. Default is “no”.

11) popup - optional. Allows you to specify if social network’s login form should be displayed in popup window or in the same window.
Possible values are “yes” and “no”. Default is “yes”.

12) openid_title - optional. Allows you to define the title of OpenId provider which will be outputted
by variable {social_sign_on_provider_title}.

II. Variable pair social_sign_on_providers

This variable pair is used to delimit the code of code which will be iterated for each social network.

III. Variables

1) social_sign_on_provider_name - outputs lowercase name of social network.

2) social_sign_on_provider_title - outputs name of social network starting from capital letter.

3) social_sign_on_provider_icon - outputs URL of social network icon.

THE TAG {exp:social_sign_on:userdata}

This is *tag pair*.

I. Parameters

No parameters.

II. Variables

1) social_sign_on_connected_provider_name - outputs lowercase name of connected social network.

2) social_sign_on_connected_provider_title - outputs capitalized title of connected social network.

3) social_sign_on_identifier - outputs unique user’s ID on the connected provider. Can be an interger for some providers, Email, URL, etc.

4) social_sign_on_profile_url - outputs URL link to profile page on the social network’s web site.

5) social_sign_on_url - outputs user’s website, blog, web page.

6) social_sign_on_photo_url - outputs URL link to user photo or avatar.

7) social_sign_on_display_name - outputs users display name provided by the social network or a concatenation of first and last name.

8) social_sign_on_description - outputs short about me.

9) social_sign_on_first_name - outputs user’s first name.

10) social_sign_on_last_name - outputs user’s last name.

11) social_sign_on_gender - outputs user’s gender. Values are ‘female’, ‘male’ or empty string.

12) social_sign_on_language - outputs user’s language.

13) social_sign_on_age - outputs user’ age, note that we don’t calculate it. we return it as is if the social network provide it.

14) social_sign_on_birthday - outputs day in the month in which the person was born.

15) social_sign_on_birthmonth - outputs month in which the person was born.

16) social_sign_on_birthyear - outputs year in which the person was born.

17) social_sign_on_email - outputs user email. Not all of social networks grant access to the user email.

18) social_sign_on_phone - outputs user’s phone number.

19) social_sign_on_address - outputs user’s address.

20) social_sign_on_country - outputs user’s country.

21) social_sign_on_region - outputs user’s state or region.

22) social_sign_on_city - outputs user’s city.

23) social_sign_on_zip - outputs postal code or zipcode.

24) social_sign_on_avatar_url - outputs URL of the avatar which was created by Social Sign On add-on using social_sign_on_photo_url image.

25) social_sign_on_themes_folder - outputs URL of the /themes/third_party/social_sign_on folder.

26) openid_title - optional. Allows you to define the title of OpenId provider which will be outputted
by variable {social_sign_on_connected_provider_title}.

THE TAG {exp:social_sign_on:logout_link}

This is *tag pair*.

I. Parameters

1) class - optional. Allows you to specify HTML “class” attribute of the logout link.

2) title - optional. Allows you to specify HTML “title” attribute of the logout link.

3) return_to - optional. Allows you to specify URL of the page where user should be redirected after successfull logout.
Default value is URL of the current page.

II. Variables

No variables.

THE TAG {exp:social_sign_on:widget_assets}

This is *single* tag.

I. Parameters

1) width - optional. Allows you to specify width (in pixels) of the widget containing links to login pages of social networks.
Default value is “430”.

2) height - optional.  Allows you to specify height (in pixels) of the widget containing links to login pages of social networks.
Default value is “222”.

II. Variables

No variables.

THE TAG {exp:social_sign_on:widget_link}

This is *tag pair*.

I. Parameters

1) class - optional. Allows you to specify HTML “class” attribute of the widget link.

2) title - optional. Allows you to specify HTML “title” attribute of the widget link.

3) template_url - required. Allows you to specify URL leading to the template where you placed exp:social_sign_on:html tag.

4) return_to - optional. Allows you to specify URL of the page where user should be redirected after successfull login via social network.
Default value is URL of the current page.

II. Variables

No variables.

THE TAG {exp:social_sign_on:more_info_form}

This is *tag pair*. Using it you can ask the user which logged in via social network to provide
some additional information which then will be saved in EE database’s exp_members and exp_member_data tables.
That is, you can ask user to provide data for any standard or custom member field.

NOTICE. Using username and password fields it is possible to tie several social accounts to single
ExpressionEngine account. So, in case there are username and password fields in more info form
and the user submits existing username/password pair then his social account will be tied to EE account of
that username/password pair. If user loggs in another social network and again submits more info form using
the same username/password pair then this social account also will be tied to EE account of
that username/password pair etc.

I. Parameters

1) form_id - optional. Allows you to specify HTML “id” attribute of more info form.

2) form_name - optional. Allows you to specify HTML “name” attribute of more info form.

3) form_class - optional. Allows you to specify HTML “class” attribute of more info form.

4) discard_form_button_id - optional. Allows you to specify HTML “id” attribute of the element
clicking on which the user can dismiss more info form.

5) return_to - optional. Allows you to specify URL of the page where user should be redirected after submitting of more info form.
Default value is URL of the current page.

6) required_field - optional. Allows you to specify name of required field. You can specify several fields
by using pipe operator.

7) required_field_label - optional. Allows you to specify label of required field. You can specify several field labels
by using pipe operator. The order of field labels should match order of field names inside “required_field” parameter.

II. Variable pairs

1) social_sign_on_more_info_saved_message - put inside this variable pair the text and HTML code which should be outputted
after successful saving of more info form data.

2) social_sign_on_more_info_discarded_message - put inside this variable pair the text and HTML code which should be outputted
after the user dismissed more info form.

III. Variables

No variables.

USAGE EXAMPLE 1: LIST OF PROVIDERS

Let’s create simple list of social network links. Each link will open a new window. See demo here.

First, we need to create a template, say technical/mod_social_sign_on_html, in which we will place only this code:

{exp:social_sign_on:html}

Second, we need another template, say technical/mod_social_sign_on_list, in which we will use exp:social_sign_on:providers_list, exp:social_sign_on:logout_link
and exp:social_sign_on:userdata tags:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>Social Sign On demo (list of providers; using popup window)</title>

<style>
.idpico{
cursor: pointer;
cursor: hand;
}
img {
border: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>

</head>
<body>

<h1>Social Sign On demo (list of providers; using popup window)</h1>

<p>
This ExpressionEngine module enables to login and register to website using popular social networks such as Facebook, Twitter, Google, LinkedIn, Yahoo etc.
</p>

{exp:social_sign_on:userdata parse="inward"}

{if social_sign_on_connected_provider_name != ""}

<!-- CONNECTED USER BADGE START -->
{exp:member:custom_profile_data}

<table width="600" border="0" cellpadding="2" cellspacing="2">

<tr>
<td valign="top">

<fieldset>

<legend>Connected user badge</legend>
				
<table width="100%" border="0" cellpadding="2" cellspacing="2"> 
				  
<tr>					
<td colspan="3"><div align="center"><strong>Hello, {social_sign_on_display_name}!</strong></div><td>
</tr>

<tr>
<td width="100" rowspan="7" valign="top" align="center">
{if social_sign_on_avatar_url}
<a href="{social_sign_on_profile_url}"><img src="{social_sign_on_avatar_url}" title="{social_sign_on_display_name}" border="0"></a>
{if:else} 
<img src="{social_sign_on_themes_folder}widget/images/avatar.png" title="{social_sign_on_display_name}" border="0" >
{/if}
</td> 
<td width="60" nowrap><div align="right"><strong>Provider</strong></div></td>					
<td align="left" >{social_sign_on_connected_provider_title}</td>
</tr>

<tr>
<td nowrap><div align="right"><strong>EE member ID</strong></div></td>
<td align="left">{member_id}</td>
</tr>

<tr>
<td nowrap><div align="right"><strong>Identifier</strong></div></td>
<td align="left">{social_sign_on_identifier}</td>
</tr>
				 
<tr>
<td nowrap><div align="right"><strong>Display name</strong></div></td>
<td align="left">{social_sign_on_display_name}</td>
</tr>

<tr>
<td nowrap><div align="right"><strong>Email</strong></div></td>
<td align="left">
{if social_sign_on_email}
{social_sign_on_email}
{if:else}
{if email}
{email}
{if:else}
not provided by  {social_sign_on_connected_provider_title} 
{/if}
{/if}
</td>
</tr>
				  
<tr>
<td nowrap><div align="right"><strong>Profile URL</strong></div></td>
<td align="left" valign="top">{social_sign_on_profile_url}</td>
</tr>

<tr>
<td><div align="right"></div></td>
<td><p>{exp:social_sign_on:logout_link title="Logout" class="logout_link"}Log me out{/exp:social_sign_on:logout_link}<p></td>
</tr>

</table> 
                
</fieldset>

</td>
</tr>

</table>

{/exp:member:custom_profile_data}
<!-- CONNECTED USER BADGE END -->

{/if} {!-- End of social_sign_on_provider_name != "" --}

{if social_sign_on_connected_provider_name == ""}

<h3>Hello, Guest!</h3>

{exp:social_sign_on:providers_list icon_folder="32x32" class="idpico" template_url="{homepage}/technical/mod_social_sign_on_html"}

<p>Sign-in with your preferred social network:</p>

{social_sign_on_providers}
<img class="idpico" idp="{social_sign_on_provider_name}" src="{social_sign_on_provider_icon}" title="{social_sign_on_provider_title}" />&nbsp;&nbsp;
{/social_sign_on_providers}

{/exp:social_sign_on:providers_list}

{/if} {!-- End of social_sign_on_provider_name == "" --}


{/exp:social_sign_on:userdata}

</body>
</html>

USAGE EXAMPLE 2: PROVIDER RADIO BUTTONS

Let’s create simple form which uses radio buttons to choose social network. Clicking Submit button will open a new window. See demo here.

First, we need to create a template, say technical/mod_social_sign_on_html, in which we will place only this code:

{exp:social_sign_on:html}

Second, we need another template, say technical/mod_social_sign_on_radio, in which we will use exp:social_sign_on:providers_form, exp:social_sign_on:logout_link
and exp:social_sign_on:userdata tags:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>Social Sign On demo (using radio inputs; using popup window)</title>

<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>

</head>
<body>

<h1>Social Sign On demo (using radio inputs; using popup window)</h1>

<p>
This ExpressionEngine module enables to login and register to website using popular social networks such as Facebook, Twitter, Google, LinkedIn, Yahoo etc.
</p>

{exp:social_sign_on:userdata}

{if social_sign_on_connected_provider_name != ""}

<!-- CONNECTED USER BADGE START -->
This part of the code is the same as in previous example
<!-- CONNECTED USER BADGE START -->

{/if} {!-- End of social_sign_on_provider_name != "" --}

{if social_sign_on_connected_provider_name == ""}

<h3>Hello, Guest!</h3>

{exp:social_sign_on:providers_form template_url="{homepage}/technical/mod_social_sign_on_html" form_element_name="providers" icon_folder="24x24" javascript_alert="yes"}

<p>Sign-in with your preferred social network:</p>

<p>
{social_sign_on_providers}
<input type="radio" name="providers" value="{social_sign_on_provider_name}"{if social_sign_on_provider_name == "google"} checked="checked"{/if} /> <img src="{social_sign_on_provider_icon}" title="{social_sign_on_provider_title}" /><br />
{/social_sign_on_providers}
</p>

<p><input type="submit" value="Submit" /></p>

{/exp:social_sign_on:providers_form}

{/if} {!-- End of social_sign_on_provider_name == "" --}

{/exp:social_sign_on:userdata}

</body>
</html>

USAGE EXAMPLE 3: PROVIDER SELECTBOX

Let’s create simple form which uses selectbox to choose social network. Popup windows will not be used. See demo here.

First, we need to create a template, say technical/mod_social_sign_on_html_no_popup in which we will place only this code:

{exp:social_sign_on:html popup="no"}

Second, we need another template, say technical/mod_social_sign_on_selectbox_no_popup, in which we will use exp:social_sign_on:providers_form, exp:social_sign_on:logout_link
and exp:social_sign_on:userdata tags:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>Social Sign On demo (using selectbox; no popup window)</title>

<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>

</head>
<body>

<h1>Social Sign On demo (using selectbox; no popup window)</h1>

<p>
This ExpressionEngine module enables to login and register to website using popular social networks such as Facebook, Twitter, Google, LinkedIn, Yahoo etc.
</p>

<p>{if logged_in}You are logged-in, {screen_name}{/if}{if logged_out}you are logged-out{/if}</p>

{exp:social_sign_on:userdata}

{if social_sign_on_connected_provider_name != ""}

<!-- CONNECTED USER BADGE START -->
This part of the code is the same as in previous example
<!-- CONNECTED USER BADGE START -->

{/if} {!-- End of social_sign_on_provider_name != "" --}

{if social_sign_on_connected_provider_name == ""}

<h3>Hello, Guest!</h3>

{exp:social_sign_on:providers_form template_url="{homepage}/technical/mod_social_sign_on_html_no_popup" form_element_name="providers" javascript_alert="yes" popup="no"}

<p>Sign-in with your preferred social network:</p>

<select name="providers">
<option value="">--</option>
{social_sign_on_providers}
<option value="{social_sign_on_provider_name}">{social_sign_on_provider_title}</option>
{/social_sign_on_providers}
</select>

<p><input type="submit" value="Submit" /></p>

{/exp:social_sign_on:providers_form}

{/if} {!-- End of social_sign_on_provider_name == "" --}

{/exp:social_sign_on:userdata}

</body>
</html>

USAGE EXAMPLE 4: PROVIDER WIDGET

Let’s create nice widget which will display social network links. Each link will open popup window. See demo here.

First, we need to create a template, say technical/mod_social_sign_on_html in which we will place only this code:

{exp:social_sign_on:html popup="no"}

Second, we need another template, say technical/mod_social_sign_on_widget, in which we will use exp:social_sign_on:widget_assets, exp:social_sign_on:widget_link, exp:social_sign_on:logout_link
and exp:social_sign_on:userdata tags:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>Social Sign On demo (using widget; using popup window)</title>

<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style> 

{exp:social_sign_on:widget_assets}


</head>
<body>

<h1>Social Sign On demo (using widget; using popup window)</h1>

<p>
This ExpressionEngine module enables to login and register to website using popular social networks such as Facebook, Twitter, Google, LinkedIn, Yahoo etc.
</p>

{exp:social_sign_on:userdata}

{if social_sign_on_connected_provider_name != ""}

<!-- CONNECTED USER BADGE START -->
This part of the code is the same as in previous example
<!-- CONNECTED USER BADGE START -->

{/if} {!-- End of social_sign_on_provider_name != "" --}

{if social_sign_on_connected_provider_name == ""}

<h3>Hello, Guest!</h3>


{exp:social_sign_on:widget_link template_url="{homepage}/technical/mod_social_sign_on_html"}Sign-in with your preferred social network{/exp:social_sign_on:widget_link}

 
{/if} {!-- End of social_sign_on_provider_name == "" --}


{/exp:social_sign_on:userdata}

</body>
</html>

USAGE EXAMPLE 5: ASKING FOR MORE INFO AND CONSOLIDATING SOCIAL ACCOUNTS

Let’s add to the EXAMPLE 1 the form using which we will ask the user to provide more email in case
email is not provided by social network. See demo here.

We also will allow user to enter username and password. In case user enters existing username/password pair,
then his social login will be tied to existing ExpressionEngine account, or, in other words, his 2 accounts will
be consolidated into 1.

The code of the template technical/mod_social_sign_on_html remains the same, but the code of template technical/mod_social_sign_on_list
will be changed into this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>Social Sign On demo (list of providers; using popup window; using more info form)</title>

<style>
.idpico{
cursor: pointer;
cursor: hand;
}
img {
border: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>

</head>
<body>

<h1>Social Sign On demo (list of providers; using popup window; using more info form)</h1>

<p>
This ExpressionEngine module enables to login and register to website using popular social networks such as Facebook, Twitter, Google, LinkedIn, Yahoo etc.
</p>

{exp:social_sign_on:userdata}

{if social_sign_on_connected_provider_name != ""}

{exp:member:custom_profile_data}

<table width="600" border="0" cellpadding="2" cellspacing="2">

<tr>
<td valign="top">

<fieldset>

<legend>Connected user badge</legend>
				
<table width="100%" border="0" cellpadding="2" cellspacing="2"> 
				  
<tr>					
<td colspan="3"><div align="center"><strong>Hello, {social_sign_on_display_name}!</strong></div><td>
</tr>

<tr>
<td width="100" rowspan="7" valign="top" align="center">
{if social_sign_on_avatar_url}
<a href="{social_sign_on_profile_url}"><img src="{social_sign_on_avatar_url}" title="{social_sign_on_display_name} social avatar" border="0"></a>
{if:else} 
<img src="{social_sign_on_themes_folder}widget/images/avatar.png" title="{social_sign_on_display_name}" border="0" >
{/if}
</td> 
<td width="60" nowrap><div align="right"><strong>Provider</strong></div></td>					
<td align="left" >{social_sign_on_connected_provider_title}</td>
</tr>

<tr>
<td nowrap><div align="right"><strong>EE member ID</strong></div></td>
<td align="left">{member_id}</td>
</tr>

<tr>
<td nowrap><div align="right"><strong>Identifier</strong></div></td>
<td align="left">{social_sign_on_identifier}</td>
</tr>
				 
<tr>
<td nowrap><div align="right"><strong>Display name</strong></div></td>
<td align="left">{social_sign_on_display_name}</td>
</tr>

<tr>
<td nowrap><div align="right"><strong>Email</strong></div></td>
<td align="left">
{if social_sign_on_email}
{social_sign_on_email}
{if:else}
{if email}
{email}
{if:else}
not provided by  {social_sign_on_connected_provider_title} 
{/if}
{/if}
</td>
</tr>
				  
<tr>
<td nowrap><div align="right"><strong>Profile URL</strong></div></td>
<td align="left" valign="top">{social_sign_on_profile_url}</td>
</tr>

<tr>
<td><div align="right"></div></td>
<td><p>{exp:social_sign_on:logout_link title="Logout" class="logout_link"}Log me out{/exp:social_sign_on:logout_link}</p></td>
</tr>

</table> 
                
</fieldset>

{exp:social_sign_on:more_info_form required_field="email|username|password|password_confirm" required_field_label="Email|Username|Password|Password confirm"}

{social_sign_on_more_info_saved_message}
<p data-style="color: green; text-align: center;">Thank you. Your data has been successfully saved.</p>
{/social_sign_on_more_info_saved_message}

{social_sign_on_more_info_discarded_message}
<p data-style="color: green; text-align: center;">Thank you. We will not bother you anymore.</p>
{/social_sign_on_more_info_discarded_message}

<fieldset>

<legend>Additional userdata form</legend>

<table width="100%" border="0" cellpadding="2" cellspacing="2">

{if social_sign_on_email == ""}

<tr>
<td colspan="2">
<div align="center"><strong>Please, let us know more about you</strong></div>
</td>
</tr>

<tr>
<td><div align="right"><strong>Email</strong></div></td>
<td><input type="text" name="email" /></td>
</tr>

{/if}{!-- End of if social_sign_on_email == "" --}

<tr>
<td colspan="2">
<div><div data-style="text-align: center"><strong>Make your account secure by choosing username and password</strong></div>
NOTICE. If you already have account, enter username and password of that account. Your social login will be tied to your existing account.
</td>
</tr>

<tr>
<td><div align="right"><strong>Username</strong></div></td>
<td><input type="text" name="username" /></td>
</tr>

<tr>
<td><div align="right"><strong>Password</strong></div></td>
<td><input type="password" name="password" /></td>
</tr>

<tr>
<td><div align="right"><strong>Confirm password</strong></div></td>
<td><input type="password" name="password_confirm" /></td>
</tr>

<tr>
<td><div align="right"></div></td>
<td><input type="submit" value="Submit" />&nbsp;<button id="discard_form_button">No, thanks</button></td>
</tr>

</table>

</fieldset>

{/exp:social_sign_on:more_info_form}

</td>
</tr>

</table>

{/exp:member:custom_profile_data}

{/if} {!-- End of social_sign_on_connected_provider_name != "" --}

{if social_sign_on_connected_provider_name == ""}

<h3>Hello, Guest!</h3>

{exp:social_sign_on:providers_list icon_folder="32x32" class="idpico" template_url="{homepage}/technical/mod_social_sign_on_html"}

<p>Sign-in with your preferred social network:</p>

{social_sign_on_providers}
<img class="idpico" idp="{social_sign_on_provider_name}" src="{social_sign_on_provider_icon}" title="{social_sign_on_provider_title}" />&nbsp;&nbsp;
{/social_sign_on_providers}

{/exp:social_sign_on:providers_list}

{/if} {!-- End of social_sign_on_provider_name == "" --}


{/exp:social_sign_on:userdata}

</body>
</html>

COMPATIBILITY WITH ZOO VISITORS ADD-ON

Social Sign On is compatible with popular Zoo Visitors add-on. When a new member registers to the website using Social Sign On
a new entry will be automatically created in Zoo Visitors channel for that member.

For compatibility with Zoo Visitors you need only to keep default short name of Zoo Visitors channel (“zoo_visitors”)  and
default names of the fields of this channel.

CUSTOM EXTENSION HOOKS

This add-on contains several custom extension hooks.

1) social_sign_on_login_member_start (file ext.social_sign_on.php). Its code:

// social_sign_on_login_member_start hook
if ($this->EE->extensions->active_hook('social_sign_on_login_member_start'))
{
  $this->EE->extensions->call('social_sign_on_login_member_start', $member_id, $userdata_array, $this->providers_enabled, $hybridauth);
}

It allows to add some additional processing before a user logged-in using some social network.

2) social_sign_on_login_member_end (file ext.social_sign_on.php). Its code:

// social_sign_on_login_member_end hook
if ($this->EE->extensions->active_hook('social_sign_on_login_member_end'))
{
  $this->EE->extensions->call('social_sign_on_login_member_end', $member_id, $userdata_array, $this->providers_enabled, $hybridauth);
}

It allows to add some additional processing after a user logged-in using some social network.

3) social_sign_on_register_member_start (file ext.social_sign_on.php). Its code:

// social_sign_on_register_member_start hook
if ($this->EE->extensions->active_hook('social_sign_on_register_member_start'))
{
  $this->EE->extensions->call('social_sign_on_register_member_start', $userdata_array, $this->providers_enabled, $hybridauth);
}

It allows to add some additional processing before a user registered and logged-in using some social network.

4) social_sign_on_register_member_end (file ext.social_sign_on.php). Its code:

// social_sign_on_register_member_end hook
if ($this->EE->extensions->active_hook('social_sign_on_register_member_end'))
{
  $this->EE->extensions->call('social_sign_on_register_member_end', $member_id, $userdata_array, $this->providers_enabled, $hybridauth);
}

It allows to add some additional processing after a user registered and logged-in using some social network.

5) social_sign_on_more_info_process_end (file ext.social_sign_on.php). Its code:

// social_sign_on_more_info_end hook
if ($this->EE->extensions->active_hook('social_sign_on_more_info_process_end'))
{
  $member_id = $consolidate_accounts_member_id ? $consolidate_accounts_member_id : $member_id;
  $this->EE->extensions->call('social_sign_on_more_info_process_end', $member_id);
}

It allows to add some additional processing after more info form has been processed.

Social Sign On Links

This entry was created March 1, 2012, 10:57 am.
This entry was last updated October 22, 2014, 9:16 am.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

2 Reviews:

BUT 05.13.13

BUT
Rating - {addon_rating_average}

The demo examples on this page(http://devot-ee.com/add-ons/social-sign-on) are not working anymore. I receive a Db error. Can this be solved?
Tx!

monkeydo 01.18.13

monkeydo
Rating - {addon_rating_average}

While I got this plugin to work once, and the dev was helpful, the integration process in not an easy one. Once up and running, the functionality is very clunky. Additionally, more than once I’ve had to manually remove references from the DB, as simply de-activating it takes the whole system down.