Social Content Application

Install: Contact Kibo eCommerce Support Platforms: Legacy eCommerce, UCP eCommerce and eCommerce+OMS

You spend a lot of time building your brand on social media. With the Social Content application, you can display social feeds directly on your storefront and let your customers advertise for you. This application integrates Kibo 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

• Link Kibo to your Instagram account (additional platforms coming soon)
• Display social content on your live sites and mobile apps
• Specify action links to take shoppers from an image feed to a targeted landing page
• Create multiple feeds to run different campaigns simultaneously
• Keyword search - match on hashtag or account name
• Edit captions for appropriateness of content
• Incorporate feeds as headerless Web pages to avoid versioning mobile apps

Install the App

Contact Kibo 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.

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 saves this information and will not prompt you again unless your login expires or you log out of Instagram from Kibo.

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.

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.
3. Results are displayed in reverse chronological order, with the most recent images appearing first.
4. Click an image to select it.
5. 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:

• Caption—The caption text to include in the feed. You can edit the original content as needed.
• Tags—The internal tags applied to the post for the purposes of sorting content internally. This field supports type-ahead for any tags you create on the Tags tab.
• Add to feed
  • Associated Feeds
  • Action Link Text
  • Desktop Action
  • Mobile Action
• Remove from feed
• Cancel
• Save And Publish/Save As Draft
• Remove

Add Content to Feeds

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.

(Optional) Configure Action Links

Action links enable you to take users who click or tap on an image in your social content feed to a specific link for targeted sales. For example, you can add an action link to an image of shoes that jumps shoppers to your Shoes category page.

1. In the Social Content extension, go to the Collection tab.
2. Select an image.
3. In the Edit Photo dialog, enter Action Link Text. This will be the prompt that users see with the image, and should be something brief and clear, such as Click to Shop!.
4. Configure the Desktop Action and Mobile Action fields. These fields define how the action link behaves on each platform:
   • Product ID—Links to the product page for the specified product.
   • Category ID—Links to the category page for the specified category.
   • Open URL—Links to the URL you specify. This can be any URL, and can include query strings.
5. You can configure both desktop and mobile actions on the same image. The way you configure the widget when you add feeds to a site determines which link is used.
6. Click Save and Publish to publish the image to the feed. If the feed is already live on your site, the image will appear immediately.

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 the Kibo Admin, and do not appear to shoppers on your site.

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.

Add Feeds to Your Site or App

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

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.