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 lets 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.

Enable the Social Media Sharing feature

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Store Editor.
   
4. Go to Variables.
   
5. Scroll to the Social Media Sharing section. Here, you will see four variables: Social-enable, Facebook-application-id, Twitter-hashtag, and Pinterest-enable.
   • Using the Social-enable option, choose Yes.
     
   • 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.
     
   • 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 how Twitter hashtags are used.
     Note: 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).
     
   • Optional step: If you wish to include a button for Pinterest sharing on your product pages, set the Pinterest-enable option to Yes.
     
6. Click the Update button.
   

Note: Stores utilizing the new themes in Theme Manager do not have to complete the following steps. Simply do a full publish of your store after completing the steps above.

The Social Media sharing CSS styles contain the following IDs:

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 Media Sharing module that will appear on your product pages. All standard Editor 3.0 templates utilizing Design Wizard--except for pre-designed template theme 10--will use the following CSS:

Download the Social Media Sharing CSS file

If you are using pre-designed template theme 10, the CSS you must use is slightly different, to account for extra margin space needed.

Download the Social Media Sharing CSS file for template theme 10

Once you have downloaded the CSS styles

1. Open the file and copy the CSS styles.
   
2. Click the Store link.
   
3. Go to Store Editor.
   
4. Click the Contents button in the Advanced Editor toolbar.
   
5. Click the Edit icon next to css-edits.
   
6. Paste the CSS styles into the Css-text field.
   
7. Click the Update button.
   
8. 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 do a full publish for the Social Media Sharing module to appear on your product pages.
   

Special notes for the Pinterest sharing feature

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 by 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 the last bullet point in step 5 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:

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

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, Turbify 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:

• Social Media Sharing CSS reference
• Can I choose not to display one of the Social Media Sharing feature options?
• Can I disable the Social Media Sharing feature on individual product pages?
• How do I get a Facebook Application ID?
• How do I administer Facebook Pages for my products?
• How do I enable and use Facebook Insights?
• Verifying a store with Pinterest
• What's a Twitter hashtag, and how do I create one for my store?