Magento – Engage

The Magento eCommerce platform serves more than 110,000 merchants worldwide and is supported by a global ecosystem of solution partners and third-party developers. Magento is a feature-rich, open-source, enterprise-class platform that offers merchants a high degree of flexibility and control over the user experience, catalog, content and functionality of their online store.

Installation

Installation of the Janrain Engage Plugin is handled by the Magento Connect Manager by passing in an Extension Key. To get this extension key, access the Janrain Engage Plugin extension page and click the “Get Extention Key” button. You’ll need to select which version of Magento Connect you are using (1.0 for versions 1.4.2 and lower, 2.0 for 1.5.0 and higher), and agree to the extension license agreement.

Figure 1: Extension Key

Copy this extension key to your clipboard or into a text file; we’ll need to retrieve this 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.

Figure 2: Key Field

Next, in the Extensions tab, paste in the Extension Key we retrieved from Magento Connect into the install 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.

 

Next

Set up and configure your new Janrain Engage account.

Configuration

To use the Janrain Engage Plugin for Magento, you must have a Janrain Engage account, so sign up for one if you have not already done so. To activate this Magento extension, you will need to obtain an API Key for Janrain Engage. This is available from the Engage 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.

Configure

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 1). Immediately after installing this module, it is common to see a 404 page not found error when clicking this link. To correnct this, log out of the backend and  then log back in.

Figure 1: Engage Configuration

  1. Click on the Options tab.
  2. Enter your Engage API Key in the field provided.
  3. 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.

Placing Content

There are numerous ways to place content in Magento. Here are some ways that work well for Janrain Engage widgets.

1. Embedding your widget in 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. Navigate to the Pages area located under the CMSsection of the admin navigation, and select the page to host the link. See Figure 1.

Figure 1: Select Page

Then, navigate to the page you want to place the widget on and click the “Content” tab. From here, you can move the cursor inside the editor to the location we want the widget to appear, and click the “Insert Widget” icon (see Figure 2).

Figure 2: Insert Widget Button

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 3.

Figure 3: Configure Widget

Click Insert Widget and then Save Page. You should now be able to view your homepage and see your new widget.

2. Adding 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.

  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 drop down menu, and select the theme to use. Click Continue to see more options (see Figure 4).
  3. 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.
  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.

Figure 4: Configure Widget Instance

You will need to 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.

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 5.

Figure 5: Top Navigation

3. 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.

  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 widget in the right column at the very top, so select Home Page.

Figure 6: Block Placement

Note that 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">

Inside this node, place the new block:


    large
    <label>Log in with your social account!</label>

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.

Save the page and view to the home page. Your new block should now appear in the right column. See Figure 7.

Figure 7: Right Block Placement

Screenshots

Engage Icons

Social Sign-in

Pre-populated Registration Form

Features

Social Sign-in:

Choose from more than 25 identity providers including PayPal Access, Facebook, Google, Yahoo!, Twitter, and more for social sign-in and registration

Social Sharing:

Prompt your customers to share their on-site activities including products viewed, reviewed, in wishlist, added to cart, or purchased to Facebook, Twitter, Yahoo!, LinkedIn, mySpace and email with a customizable broadcast and targeted sharing widget.

Analytics:

Analyze user registration and login metrics in the Janrain Analytics Dashboard or your favorite 3rd party analytics package like Google or Omniture to fine-tune the user experience for even more registrations and return visitors.

Help Us Improve!

Give us your feedback