Social Content Application by Kibo eCommerce

Configuration Guide

Current Version: 1.0.0 (April 2016)
Install: Contact Kibo eCommerce Support
More Info: Version History

You spend a lot of time building your brand on social media. With the Social Content Application by Kibo eCommerce, you can display social feeds directly on your storefront and let your customers advertise for you. This application integrates Kibo eCommerce with your Instagram account, allows you to search content relevant to your brand, and provides editing capabilities so you can control the messages that appear on your site(s).

Application Features

Install the App

Contact Kibo eCommerce Support to install the Social Content App on your tenant.

Once installed, the app does not require any additional configuration. However, you do need to add the Social Content widget to any themes in which you want to display content.

Enable the App

  1. In Admin, go to System > Customization > Applications.
  2. Click Social Content App by Mozu.
  3. Click Enable the App.

Once the app is enabled, a Social Content extension appears in Admin at Main > Marketing > Social Content. If you just enabled the app, you might need to refresh your browser to see the extension.

Add the Widget to Your Theme

The Social Content App includes a theme widget that is available on GitHub.

Note: The Mozu/SocialContent-Widget repository is private. Contact Kibo eCommerce Support with your GitHub username to request access to this repo.

Update Your Theme

  1. Clone or download the GitHub repository.
  2. Add or merge the widget files to your theme. The necessary files are listed in the widget readme on GitHub.
  3. Run Grunt to build the theme.
  4. Upload the resulting ZIP file to Dev Center.
  5. Install the updated theme to the sandbox you’re working in.
  6. In Admin, go to Main > Site Builder > Themes to apply the new theme.

You will use the widget in later sections to display social content on your site or mobile app.

Use the App

After you enable the app, you can access all social content functionality at Main > Marketing > Social Content in Admin. The first time you launch the Social Content extension, you must enter your Instagram username and password. Kibo eCommerce saves this information and will not prompt you again unless your login expires or you log out of Instagram from Kibo eCommerce.

Create a Feed

Feeds are how you display images on a site or mobile app. You must create a feed before you can add images from your collection to the feed. Once you have created your feed and added images to it, you can select the feed from the Social Content widget in Site Builder to display it on your site.

  1. In the Social Content extension, go to the Feeds tab.
  2. Click Create Feed.
  3. Give your feed a name. This name will not appear on your live site, so it can be anything that makes sense to your internal users who will manage the feed.
  4. Click Save.

You can preview the images in a feed by clicking the three dots at the end of the feed row. You can also edit or remove a feed at any time. If you remove a feed, you cannot recover the feed.

Search for Content

After you log in to Instagram, you can search all Instagram content directly from the Social Content dialog. For example, if you run a promotion asking shoppers to tag posts with #MyPromo, you can search for MyPromo to get images related to your promotion. The search returns a match if your term appears in a hashtag on a post or in the poster's account name. You can only search on one term at a time. Do not include the # or @ symbols in your search term.

Note: Hashtags match if the tag appears in either the original post OR comments on the post. If you are encouraging users to post with a specific hashtag, they must use the hashtag in the original post for the tag to appear in the content feed.
  1. In the Social Content extension, go to the Search tab.
  2. Enter a term in the Search textbox to display all images that match that term. The app returns photos that match your search term to any of the following:
    • The account name that posted the image.
    • Hashtags in the image caption OR in comments on the image.
    Results are displayed in reverse chronological order, with the most recent images appearing first.
  3. Click an image to select it.
  4. When you finish selecting images, go to the Saved tab to view and edit your selections. Images that are currently in your collection will appear as Saved in any future searches.

Edit Content

You edit content and add images to feeds from the Saved tab. Click on an image to edit the caption, add internal tags to help you sort images within your social content feeds, and to configure the actions that occur when a shopper clicks or taps on the image in a feed on your site.

The Edit Photo Details dialog includes the following options:

Add Content to Feeds

Note: You must create a feed from the Settings tab before you can add content to that feed.

  1. In the Social Content extension, go to the Saved tab.
  2. Select an image.
  3. In the Edit Photo dialog, select the feed name in the Associated Feeds list. You can add the same photo to multiple feeds.

Add Internal Tags

The Social Content app supports internal tags that you can use to organize your content. These tags are for filtering and organizing content in Kibo eCommerce Admin, and do not appear to shoppers on your site.

Note: Currently, you can apply tags, but you cannot search on them. Searching by tag will be supported in future versions of this app.
  1. In the Social Content dialog, go to the Collection tab.
  2. Select an image.
  3. In the Edit Photo dialog, enter any Tags you want to associate with the image. Hit <Enter>/<Return> to add the tag to the image.

Future versions of this app will support searching your Collection by tag.

Add Feeds to Your Site or App

You add feeds to your site or app using the Social Content widget.

Note: You must add the widget to your theme before you can complete the steps in this section.

  1. In Admin, go to Main > Site Builder > Editor.
  2. In the site tree, select the page template or page where you want the feed to appear. You can add feeds to any page that has dropzones.
  3. Switch to the Widgets view.
  4. Drag the Social Content Widget to a dropzone on the page.
  5. Enter the name of the feed you want to display. Ensure that the name you enter exactly matches the name you gave the feed in the Social Content dialog.
  6. Set the widget configuration:
    • Desktop—Formats the feed for desktop sites and optionally displays title text for the feed. Any content with an action link goes to the Desktop Action URL you specified when you edited the content.
    • Mobile—Formats the feed for mobile sites, removing any titles and allowing it to function as headerless web content. This allows you to update the content of the feed without updating your mobile app. Any content with an action link goes to the Mobile Action URL you specified when you edited the content.
  7. Click Save.