Magento – Social Login

Contents

Overview

The Janrain Social Login plugin for Magento enables integration of Social Login features on your Magento site. This plugin is available in the Magento Connect Extensions marketplace.

Prerequisites

To use the Janrain Social Login plugin for Magento, you must have a Janrain Social Login account. To activate this Magento integration, you need to obtain an API key for Social Login (available from the Janrain Dashboard). You do not need to create a sign-in page, any HTML files, or PHP scripts because the plugin handles all of this automatically.

Installation

Installation of the Social Login plugin for Magento involves specifying an extension key to the Magento Connect Manager. To get this extension key, follow these steps:

  1. Access the Janrain Engage plugin page.
  2. Click Get Extension Key.
  3. Select the version of Magento Connect that you are using (1.0 for versions 1.4.2 and lower, 2.0 for 1.5.0 and higher).
  4. Accept the license agreement.
extension key

Figure 1: Extension Key

  1. Copy this extension key to your clipboard or into a text file (you will need to retrieve it for use in the Magento Connect Manager). The Magento Connect Manager is accessible in the admin back end (in the main navigation) under System > Magento Connect > Magento Connect Manager. This redirects you to the Magento Connect Manager application, which requires authentication to access.
  2. Enter your admin username and password to continue. 
key field

Figure 2: Key Field

  1. In the Extensions tab, paste the extension key you retrieved from Magento Connect into the extension key field under the Install New Extensions section (see Figure 2).
  2. Click Install.
  3. Click Proceed. A terminal message area notifying you of your successful install is displayed.

Configuration

Once you have your API key, go to your Magento installation’s admin back end and navigate to System > Configuration.

You should see a new Janrain section, with a new menu item labeled Engage under it (see Figure 3). Immediately after installing this module, it is common to see a “404 page not found” error when clicking this link. To correct this, log out of the back end and then log back in.

configuration

Figure 3: Configuration

  1. Click the Options tab.
  2. Enter your Social Login API Key in the field provided.
  3. Click Save Config.

Your account information will be retrieved from the server, which updates the set of social icons that appear in your login and sharing solutions. You can expand the Account Info section to verify that the data was retrieved. Note: This data is automatically retrieved only when the API key changes. Therefore, if you need to update your local list of identity providers, use the Click Here to refresh link in the Account Info box.

Placing Content

There are numerous ways to place content in Magento. Here are some ways that work well for Social Login.

1. Embedding your UI in CMS Content

If you want to add your UI inside the content area of a Page or Static Block, you can do so by adding an inline widget. Navigate to the Pages area (located under the CMS section of the admin navigation) and select the page to host the link.

select page

Figure 4: Select Page

Navigate to the page you want to place the UI on and click the Content tab. From here, you can move the cursor inside the editor to the location in which you want the UI to appear, and click the Insert Widget icon.

insert widget buton

Figure 5: Insert Widget Button

Select Janrain Engage Login as the widget type. After a second or two, additional options will appear allowing you to specify text to display and the icon size.

configure widget

Figure 6: Configure Widget

Click Insert Widget and then Save Page. You can now view your homepage and see your new UI.

2. Adding a Widget Instance

In some cases, you may want more control over where you place your Social Login functionality, or to display it on multiple pages without needing to edit each page individually. You can do this by adding a widget instance.

  1. Navigate to the Widgets area (located under the CMS section of the admin navigation) and click Add New Widget Instance.
  2. Select Janrain Engage Login from the Type menu and select the theme to use. Click Continue to see more options (see Figure 7).
  3. Give your widget a title. This title won’t display anywhere on the page, but serves as a unique identifier. If you have multiple store fronts, you can select which to display this widget on (otherwise select All Store Views).
  4. Leave Sort Order set to 0 unless you’re planning on using this instance in a space with multiple blocks of varying sort orders.
  5. Once your settings are configured, click Add Layout Update to add a layout instance of this widget.
configure widget instance

Figure 7: Configure Widget Instance

You will need to decide where the UI will appear. From the Display On menu, you can select All Pages, a Specified Page, All Products, specific product types, or specific categories.

Once you have selected a page type, you can choose which content area to use. This example uses Navigation Menu. In the left column, click the Widget Options tab and specify an icon size and display text. Click Save.

The widget is displayed in the header as shown in Figure 8.

magento top navigation

Figure 8: Magento Top Navigation

3. Page Layout XML

If you want more control of your UI placement on a page-by-page basis, you can add a new block node in your page’s layout.

  1. Navigate back to the Pages section (under CMS in the admin navigation menu).
  2. Select the page you want to use.
  3. Select the Design tab. For this example you’ll put the UI in the right column at the very top, so select Home Page.
block placement

Figure 9: Block Placement

Note that XML is pre-populated in the Layout Update XML text box (see Figure 9). This code is commented out, so the page uses the default layout. Uncomment it by removing <!-- and --> from the beginning and end, so it will be used. Put the reference node to the right column (which begins with <reference name="right">).

Inside this node, place the new block:

The type of the block specifies that you want to use the Engage module and the Auth block. You could use the same technique for the social sharing block using type=”engage/share”. In this example, before=”-” specifies placing the block at the top. You can reference another block name here if you wish.

Save the page and view the home page. Your new block should now appear in the right column (see Figure 10).

right block placement

Figure 10: Right Block Placement

Screenshots

social provider icons

Figure 11: Social Provider Icons

social login

Figure 12: Social Login

prepopulated reg form

Figure 13: Pre-populated Registration Form