This topic describes the prerequisites and installation and configuration options for the Social Login integration.
To use the Janrain Social Login plugin for Magento, you must have a Janrain Social Login account, so sign up for one if you have not already done so. To activate this Magento integration, you’ll need to obtain an API key for Social Login. This is available from the Dashboard. You will not need to create a sign-in page, any HTML files, or PHP scripts, as 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, access the Janrain Engage plugin page, and click the Get Extension Key button. You’ll need to 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), and agree to the license agreement.
Copy this extension key to your clipboard or into a text file; you’ll 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. Enter your admin username and password to continue.
Next, in the Extensions tab, paste in the extension key you retrieved from Magento Connect into the extension key field under the Install New Extensions section (see Figure 2). Click Install, and then Proceed. You should see a terminal message area notifying you of your successful install.
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 info 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, you will need to 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 CMSsection of the admin navigation, and select the page to host the link. See Figure 4.
Then, 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 we want the UI to appear, and click the Insert Widget icon (see Figure 5).
From here, select Janrain Engage Login as the widget type. After a second or two, additional options should appear allowing you to specify text to display and the icon size. See Figure 6.
Click Insert Widget and then Save Page. You should now be able to 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 them 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 drop-down menu, you can select All Pages, a Specified Page, All Products, specific product types, or specific categories.
Once your page type is selected, 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. Finally, click Save.
The widget should show up 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 <!-- and --> from the beginning and end, so it will be used. Next, locate the reference node to the right column, which is designated by beginning with: <reference name="right">
Inside this node, place the new block:
large &amp;lt;label&amp;gt;Log in with your social account!&amp;lt;/label&amp;gt;
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 to place the block at the top. You can reference another block name here if you wish.
Save the page and view to the home page. Your new block should now appear in the right column. See Figure 10.