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.
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 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:
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.
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.
There are numerous ways to place content in Magento. Here are some ways that work well for Social Login.
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.
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.
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.
Click Insert Widget and then Save Page. You can now view your homepage and see your new UI.
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.
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.
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.
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
--> from the beginning and end, so it will be used. Put the reference node to the right column (which begins with
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).