S001 Social Sharing Bar

Social Sharing Bar

Layout Variant: S001

Content Type: Placeholder for default (Note: add Settings document for customized bar)

Expected Use:

Standard usage is to add the social sharing bar defined for your specific site. This is defined in the code base and allows you to quickly add the standard (default) version of the social sharing bar. This includes Facebook, Twitter, LinkedIn and email.

To do this you can either find an existing CoreMedia "Placeholder" document that has been set up with the "Social Sharing Bar" as the Function Variant or you can create a new one in the same manner.

Customizing the Social Options:

If the standard version of the social sharing bar does not meet your needs on a specific page you may create an alternate version from the available social properties that are currently defined. New icons for this component require coordination with a developer and will need approval from the Content Governance Team.

Icons are located at: /Sites/Emerson Electric Shared Product Assets/Global/English/Assets/Site-Wide/Pictures/Social Icons S001/
Current Icons include: Blog, Facebook, Google+, LinkedIn, Instagram, Naver, TikTok, Pinterest, RSS, Twitter X, WeChat, Weibo, YouTube. Although these icons are available, not all have been configured to be used. If you wish to use a new option, you will need to request approval through your platform representative. (Some of these cannot be used for S001 regardless - eg. you cannot post to YouTube.)
Note that social icons for CopyURL, Email and Print also exists and follows the same standard set up as that of the likes of Facebook, LinkedIn, etc.

To create your own set of social sharing icons for the social share bar, you will complete the same steps as stated above and add a social sharing bar "Placeholder" to your page. You can then create a "Settings" Document to define the social properties you wish to include. This Settings Document will override the default social share option.

With a new Settings Document you will create a structure list using the s001Social setting:
- Click to highlight the box under the "Property" label
- Select "Struct List" from the "+" dropdown (it will show "String" as the default")
- Where it shows "new property" you will enter "S001Social"

Once you create a new settings file, you will need to execute the following steps for each social property you wish to include.

Under the s001Setting add entries to the struct list by clicking the icon "Add Item to ListProperty". The S001Setting list row must be highlighted to add a new entry. Each new entry will be labeled "#1", "#2", etc. as you add each structure list entry.
With the row "#1" highlighted, now add each of the following:
- Click the "+" dropdown to add a "String" entry
  - for the Property name use "iconCSS"
  - for the Value: use the name of the CSS class for this icon. The current available options include twitter, facebook, linkedin, and email.
  - The Type is already set to String
- Click the "+" dropdown to add another "String" entry
  - for the Property name use "social"
  - for the Value: use the name of the Freemarker template to render this icon. The current available options include twitter, facebook, linkedin, and email.
  - The Type is already set to String
- Click the "+" dropdown to add a third "String" entry
  - for the property name use "label"
  - for the Value: this is the alt text for the icon (eg. Facebook, Twitter, etc.)
  - The Type is already set to String
- Click the "+" dropdown to add a fourth item to the struct list in the form of a "Boolean" Type
  - for the property name use "enableIcon"
  - for the Value: select the checkbox if you want the icon to appear on the page
  - The Type is already set to Boolean
- Click the "+" dropdown to add a fifth and final item to the struct list as a "String"
  - for the property name use "prefixURL"
  - for the Value add the base URL for the social sharing platform, which prepended to the current page's URL
  - The Type is already set to String

To add another social share item, repeat the process above by again clicking the icon "Add Item to ListProperty". The S001Setting list row must be highlighted to add a new entry.

Assigning a new s001social settings file at the page level with the structure defined above will override the s001 setup from the site level. In the page specific s001social settings, a content author can determine which social media options and URLs are applicable to that page.

To activate the new S001, add the settings file to the page you are creating by doing the following:

Go to the "System" tab
Scroll to "Linked Settings"
Drag your new "Settings" document into the linked settings

On the Content tab of the S001 Social Sharing Bar placeholder, authors have the option to pick and choose the background on the "Background Color" section. This will display the social media icons with the selected background color.

Special Note:

The use of WeChat or Weibo Icon are optional on S001. Refer to Regression Page specific to a locale.

As many of these social sites use Open Graph for the details of what is shared in the preview from the page, you must be sure to include HTML Title and HTML Meta description text for your page or you may receive "garbage" text in the description field when posting to Facebook, etc.

Open Graph properties:

These properties are defined programatically and are not editable directly by the author. Note, you can see where the information is coming from and edit that CoreMedia field where applicable.

Overwriting the default image on your page:

There is a default image set for social sharing using an Emerson logo. You can override this image with a custom selected image by adding the following line to a Settings document and adding it to the linked settings of your Page as noted above. This can be its own Settings file or another entry in the settings file you created for a custom social sharing bar.

Add a "Link" struct entry to your Settings document

Property = openGraphImage

Value = drop an image from the library here

Struct = default of "link to All" is fine

Twitter Cards:

These are also available for use with Twitter. These are not authorable, but are on the page by default for sharing to Twitter.

<meta name="twitter:title" content="TITLE OF POST OR PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name="twitter:image" content="LINK TO IMAGE">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@USERNAME">

Allow user to specify a picture to be used for the og:image. This would need to be added as a field in a CoreMedia Page.

Troubleshooting social media cards:

Facebook: Debugger

Twitter: Validator

Pinterest: Rich Pin Validator

Linkedin: Post Inspector