Magento – Engage
Follow these steps to add the Social Sign-in plugin to an existing Magento installation.
- A configured, and deployed Social Sign-in solution. All account types are supported by this module, including the free Basic service level.
- A deployed Magento site. Versions supported: 1.7 and higher.
- PHP 5.3 (with JSON) or newer.
- Registered and logged in to Magento connect marketplace.
1 . Install Magento Plugin ¶
1. Navigate to the Janrain Engage Plugin extension page.
2. Select the version of Magento being used, and click Get Extension Key button.
3. Copy extension key.
4. Log in to the Magento Connect Manager.
5. Navigate to System > Magento Connect > Magento Connect Manager.
6. Click on the Extensions tab.
7. Paste the Extension Key into the Paste extension key to install text field.
8. Click the Install button.
9. Click the Proceed button.
2. Configure Plugin Installation ¶
1. Navigate to System > Configuration > Janrain. Note: it is common to see a 404 page not found error when clicking this link directly after installation. To correct this, log out of the backend and then log back in.
2. Click on the Options tab.
3. Enter your Engage API Key in the field provided.
4. Clicking Save Config.
Your Account Info will be retrieved from the server. This updates the set of social icons that appear in your Login and Social Sharing widgets. 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 Social Providers, you will need to use the Click Here to refresh link in the Account Info box.
3. Add Sign-in Icons to UI ¶
There are numerous ways to place content in Magento. Here are some ways that work well for Janrain Engage widgets.
Add Sign-in using CMS content ¶
If you want to add your widget inside the content area of a Page or Static Block, you can do so by adding an inline widget.
1. Navigate to the Pages area located under the CMS section of the admin navigation.
2. Select the page to host the link. See Figure 1.
3. Navigate to the page to host the icons.
4. Click the Content tab.
5. In the editor, select the place to add the Sign-in functionality, and click the Insert Widget icon (see Figure 2).
6. 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 3.
7. Click Insert Widget and then Save Page.
Add Sign-in Using a Widget Instance ¶
In some cases, you may want more control over where you place your widgets and to display them on multiple pages without needing to edit each page individually. You can do this by adding a Widget Instance.
- Navigate to the Widgets area located under the CMS section of the admin navigation and click Add New Widget Instance.
- Select Janrain Engage Login from the Type drop down menu, and select the theme to use. Click Continue to see more options (see Figure 4).
- First, 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.
- Leave Sort Order set to 0 unless you’re planning on using this instance in a space with multiple blocks of varying sort orders.
- Once your settings are configured, click Add Layout Update to add a layout instance of this widget.
6. Decide where the widget will display. From the Display On drop down menu you can select All Pages, a Specified Page, All Products, specific product types, or specific categories.
7. Select 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 5.
Add Sign-in Using Page Layout XML ¶
If you want more control of your widget placement on a page-by-page basis, you can add a new block node in your page’s layout.
- Navigate back to the Pages section under CMS in the admin navigation menu.
- Select the page you want to use.
- Select the Design tab. For this example you’ll put the widget in the right column at the very top, so select Home Page.
Note: the XML is pre-populated in the Layout Update XML text box (see Figure 6). 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">
4. Inside this node, place the new block:
large <label>Log in with your social account!</label>
Note: The type of the block specifies that we want to use the Engage module, and the Auth block. We 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.
5. Save the page and view to the home page. Your new block should now appear in the right column. See Figure 7.