Enabling the Social Media Sharing feature using Store Editor

If your store uses standard Editor 3.0 templates and you do not wish to enable the Social Media Sharing feature using the Design Wizard (the recommended option), you may instead enable this feature using the Store Editor Variables page. This option also requires you to add CSS styles to your store's css-edits file.

Before you start

When enabling the Social Media Sharing feature, you will be given the option to enter a Facebook Application ID. Providing a Facebook Application ID is recommended, but optional. When you provide this ID, it enables Facebook's Open Graph Meta Tags, which let you administer Facebook Pages for products (where you can share product updates and engage with customers who have "Liked" a product), and use Facebook Insights to track key metrics.

While the Social Media Sharing feature has been designed to share the correct product image, product name, and product description even in the absence of a Facebook Application ID, because the Facebook "Like" feature belongs to a third-party site, this feature may change or be deprecated over time. Providing a Facebook Application ID helps to ensure that the correct product image, product name, and product description continue to be shared in the event of some feature changes.

Enabling the Social Media Sharing feature

To enable the Social Media Sharing feature:
  1. In Store Editor, go to the Variables page.

  2. Scroll to the Social Media Sharing section, located near the bottom of the page. Here, you will see four variables: Social-enable, Facebook-application-id, Twitter-hashtag, and Pinterest-enable.

  3. Using the drop-down list for the Social-enable variable, choose "Yes."

  4. Recommended step: If you have a Facebook Application ID for your store, you may enter it into the Facebook-application-id field. If you don't have a Facebook Application ID but wish to obtain one, learn how.

  5. Optional step: If you wish to add a custom Twitter hashtag to be used when customers share your products with their followers on Twitter, you may enter this hashtag into the Twitter-hashtag field. Read about what Twitter hashtags are used for.

    Hashtags may be up to 20 characters in length, and should not include a "#" sign. The "#" sign is automatically added to your hashtag in the default message provided to customers. Including a "#" sign in this field will result in the hashtag displaying a duplicate "#" sign (e.g., ##myhashtag).

  6. Optional step: If you wish to include a button for Pinterest sharing on your product pages, set the Pinterest-enable option to "Yes."

  7. Click the "Update" button.

Next, you must add CSS styles for this feature to your store's css-edits file. If the CSS styles are not added, formatting will not be applied to the Social MediaSharing module that will appear on your product pages. Note: A new #ys_social_pinterest element was added on October 16, 2012, to support the Pinterest sharing feature.

All standard Editor 3.0 templates except for pre-designed template theme 10 will use the following CSS: If you are using pre-designed template theme 10, the CSS you must use is slightly different, to account for extra margin space needed.

Template theme 10 is the theme displayed in the image below:

Pre-designed template theme 10

Once you have downloaded the CSS styles:
  1. Open the file and copy the CSS styles.

  2. In Store Editor, open the Advanced Editor, and click on the "Contents" link in the Advanced Editor toolbar.

  3. On the Contents page, click the "css-edits" link.

  4. Click the "Edit" link in the Editor toolbar.

  5. Paste the CSS styles into the "Css-text" field.

  6. Click the "Update" button.

Previewing your changes is recommended. Once you've enabled the Social Media Sharing feature, added the CSS styles to your store's css-edits file, and previewed your changes, you must publish Store Editor for the Social Media Sharing module to appear on your product pages.

Special notes for the Pinterest sharing feature, added October 16, 2012

If you enabled Social Media Sharing for your store before October 16, 2012, and wish to add the Pinterest sharing option, you must enable this option using the new Pinterest-enable option in Store Editor, as well as update your CSS bu re-running the Design Wizard or adding a new CSS element to your store's css-edits file.

To enable the Pinterest-enable option, please see step 6 in the "Enabling the Social Media Sharing Features" instructions, above.

If you do not wish to re-run the Design Wizard to update your store's CSS, you can add the following new CSS element to your store's css-edits file:

#ys_social_pinterest {float:left;}

For instructions on how to edit your store's css-edits file, see our Social Media Sharing CSS reference or the CSS instructions above.

Other notes

Note: When you add a new product, or first enable the Social Media Sharing feature for your products, you may notice a time delay between publishing your changes and when Facebook recognizes the "Like" function on the product page. This time delay issue is on Facebook's end, and because of this, Yahoo cannot change how these updates are handled by Facebook.

When this delay occurs and a user clicks the "Like" icon on a product page, a message noting that Facebook is unable to reach the page will be displayed beside the "Like" icon. In some cases the delay lasts for only 1 to 5 minutes after publishing, and in other cases, can take an average of 15 minutes to resolve. If this does not resolve after an hour, then any errors seen as a result of clicking the "Like" icon may be as a result of a different issue.

See Also:
  • Was this article helpful?

  • Yes
  • No

Still need help?