Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Social Share

Social Share

Display any combination of social media links in a “Connect with Us” box. The Social Share component must be used in a small cell of a Grid Container component.

Screenshot of the social share component including a headline of "FOLLOW US ON SOCIAL" and social icons for Facebook, Instagram, X, YouTube, LinkedIn and TikTok
Figure 1: Example of a Social Share component from the MSU homepage. 

Component Information

Benefits

  • This is a good method to share social media links which aren’t the sitewide social links commonly used in the footer of a site.

Example Use Cases

  • Share the social media accounts for a faculty member or lab.
  • Share the social media accounts for a department or smaller unit within a college.
  • Use to promote the social media accounts for a department or college within a grid container, for a more prominent call to action.

Frequently Asked Questions

The channels are limited by the current list of institutional channels. To suggest an additional channel to be added to the system, please email Comms.WebSupport@msu.edu.

The Social Share component shows a channel icon, but not a page name with the icon. Having two of the same icon would lead to confusion. Units should only have one account per channel type in the Social Share component. To share multiple accounts of the same channel, build multiple variations of the Social Share component with different accounts in each.

Instructions For Use

In Pages:

  1. Select the page in the content tree.
  2. Click “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Grid Container component from list. For the Social Share component, choose one of the variants that includes a Small sized component box.

Alternate method:

  1. Click Components tab at top of content tree.
  2. Locate Grid Container component.
  3. Drag the Grid Container component to any empty placeholder area of the page below the Breadcrumb links. For the Social Share component, choose one of the variants that includes a Small sized component box.

Add Social Share to Grid Container:

  1. Select the grid box to be used by clicking on the “+” sign in the center layout panel or use the Components tab to drag the Social Share component into the desired Small sized grid container.
  2. Add a heading by entering text in the placeholder field.

Social media links must be added using Explorer or Content Editor.

To manage links using Explorer:

Begin in Pages:

  1. Click the Social Share component to display the toolbar.
  2. Click Box with arrow icon on the toolbar to open Explorer. It opens in a new browser tab.

In Explorer:

  1. Locate the Social Share component that was just created.
  2. Add a title to the component Title field.
  3. In the column to the right of the component, click “+ Create” to add a new social media link.
  4. Select the appropriate social media icon from the dropdown list.
  5. Select the External link option and add a URL.
  6. Repeat as necessary. 
  7. Return to Pages.

In Pages:

  1. Refresh the screen to see the changes. 
  2. View the page using Preview (eye icon at the upper right).
  3. Publish the page. 

To manage links using Content Editor:

In Pages:

  1. Click the nine dot cube icon at the upper left.
  2. Select the environment.
  3. Select Content Editor.

In Content Editor:

  1. Locate the Social Share component that was just created.
  2. Add a title to the component in the Title field.
  3. Right-click on the component and select Insert > Social Media Link.
  4. In the Icon dropdown, select the appropriate social media site for the link.
  5. Use the Link chooser field to add the link by selecting Insert external link.
  6. In the URL field, add the link to the social media account.
  7. Repeat each step to add additional social links for the other social media platforms.
  8. Return to Pages.

In Pages:

  1. Refresh the screen to see the changes. 
  2. View the page using Preview (eye icon at the upper right).
  3. Publish the page. 

In Pages:

  1. Click the Social Share component to select it.
  2. In the right-side Social Share menu, click Manage Items to expand the panel.
  3. Hover over a link item, click the “…” icon and select Move Up or Move Down from the menu. Repeat as necessary.

Alternative, in Content Editor:

  1. Locate the Social Share component.
  2. Click and drag the links in the content tree to reorder. Click “OK” to accept the changes
  3. Return to Pages.
  4. Refresh the screen to see changes.
  5. Preview the page.
  6. Publish the page.

Tool Use Guide

 

 PagesExplorerContent Editor
Add to Grid ContainerOptimal  
Edit titleOptimalPossiblePossible
Add/edit links PossibleOptimal
Add/edit channel icons PossibleOptimal

 

Documentation updated: Sept. 10, 2024

XMC Component Guide