Facebook Share

This topic applies to

Applies to

Commerce Web Stores

 

Commerce web stores enable you to add a Facebook Share button on your item detail pages to make it easier for visitors to share items on your site. This button is enabled by default. For sharing to work, you must obtain an appId from Facebook and associate the appId with your shopping domain. See the following help topics for more information:

Facebook Share

The Facebook Share button lets visitors share an item from your site on Facebook. When a visitor clicks the Share button, the Share on Facebook window is displayed and lets the visitor enter comments about the page and choose how it is shared. Sharing options include:

  • Own timeline

  • Friend’s timeline

  • In a group

  • On a page the visitor manages.

  • Private

If the visitor is not logged in to Facebook, then the Facebook log in form is displayed first.

Facebook Open Graph

Facebook uses Open Graph markup for data collection. With this method product metadata is included in the HTML header of the product page. The following open graph metatag mappings are defined in the shopping configuration file.

metaTagMapping: { // [Open Graph](http://ogp.me/) 'og:title': seo_title , 'og:type': seo_type , 'og:url': seo_url , 'og:image': seo_image , 'og:site_name': seo_site_name , 'og:description': seo_description , 'og:provider_name': seo_provider_name , 'og:price:standard_amount': seo_price_standard_amount , 'og:price:currency': seo_price_currency , 'og:availability': seo_availability , 'og:rating': seo_rating , 'og:rating_scale': seo_rating_scale , 'og:rating_count': seo_rating_count }

The following screen shot shows Open Graph data included in the HTML header output of an item detail page:

Configure Facebook Share

Follow the correct configuration procedures below, depending on the version of SuiteCommerce Advanced you are implementing. For information on configurable properties, regardless of your implementation, see Configuration Properties Reference.

See the Facebook developer documentation at https://developers.facebook.com/docs/plugins for more information on the Facebook Share plugin.

Pre-Vinson

Facebook Share options are set in the shopping configuration file. To change the configuration, you must create a custom ShoppingApplication module and set your configuration in the custom SC.Shopping.Configuration.js. You can find the file at modules/suitecommerce/ShoppingApplication@x.x.x/JavaScript in the local SuiteCommerce Advanced source files. For detailed instructions on creating a custom SuiteCommerce Advanced Module, see Customize and Extend Core SuiteCommerce Advanced Modules.

The following code sample from the SC.Shopping.Configuration.js file is used to enable and set options for Facebook Share. The Facebook share button is enabled by default, but you do need to set the appId for your site.

, facebook: { enable: true , appId: '123456789012345' , popupOptions: { status: 'no' , resizable: 'yes' , scrollbars: 'yes' , personalbar: 'no' , directories: 'no' , location: 'no' , toolbar: 'no' , menubar: 'no' , width: '500' , height: '250' , left: '0' , top: '0' }

Vinson and Later

To configure properties in NetSuite (Vinson and later):

  1. Access the SuiteCommerce Configuration Tool for your site.

    Note

    See Configure Properties for more information.


  2. In the SuiteCommerce Configuration tool, navigate to the Integrations tab and the Facebook subtab.

  3. Set feature-properties as required. For more information on each configurable property, see Facebook Subtab.

Facebook appId and Domain Association

As part of configuring the Facebook share button on your site, you must obtain an appId from Facebook and associate it with your shopping domain. To obtain the appId, register as a developer with Facebook at http://developers.facebook.com.

To obtain an appId and associate your domain:

  1. Go to https://developers.facebook.com/apps/.

  2. Click Create a New App.

  3. In the Display Name field, enter the name of your web store or site.

  4. The Namespace field is optional, but you can set it to a unique identifier for your app.

  5. From the Category dropdown list, select the category that best describes your site.

  6. Click the Create App ID button.

  7. Complete the security check.

  8. Click the Settings menu.

  9. Click Add Platform.

  10. Click Website.

  11. In the Site URL field, enter the URL for your site.

  12. In the App Domains field, enter your shopping domain.

  13. Take note of the App ID. This is the value to enter as the appId in the shopping configuration file.

  14. Click Save Changes.