Use Social Apps on your website

By adding Social apps to a web page, such as Facebook plugins, you can drive traffic to your Public Web Site, tap into the power of social networking, and help grow your business.

The Contoso Bistro home page with several FaceBook plugins added.

What do you want to do?


Learn more about the value of social networking to your business

Social networking is rapidly emerging as an important marketing tool for small businesses and websites. By integrating and coordinating social tools, you can organically build an active customer base through “digital word of mouth”.

What is social networking?

Although optimizing your search engine to improve page ranking is an important business requirement, large businesses have a distinct advantage over small businesses just through sheer numbers. Social networking has become another way to promote discoverability of your business because it takes advantage of social connections within a network of friends and communities.

Communities, whether on the Web or not, are by their very nature well-known and relied-upon. The bread and butter of communities are conversations of one kind or another between individual members. By adding social apps to your website, such as Facebook buttons and plug-ins, you can create a social experience around your business within communities on the Web.

For example, it’s easy for individuals to “Like” your website, and then you instantly become part of a conversation. When members of a community visit your website, profile data and photos can be used to personalize the experience. If others “Send” a web page, they are leveraging the power of community to connect, share, listen, and learn from each other. The combined effect of this community interaction can drive traffic back to your website as effectively as any advertisement.

Top of Page Top of Page

The Facebook plugins

To engage in social networking you can add the Facebook plugins to a web page. The following table summarizes these plugins.

Plugin Description Example
Like Button Shares a web page from the website back to a visitor’s Facebook profile. An example of a Like Button
Activity Feed Shows visitors what their friends are doing on the website through a list of likes and comments. Optionally, add a button to create or log in to a Facebook account. An example of an Activity Feed
Recommendations Box Provides personalized suggestions for a web page that other visitors might like. Optionally, add a button to create or log in to a Facebook account. An example of a Recommendations Box
Send Button Sends content to a visitor’s friends. An example of a Send Button
Subscribe Button Subscribes to other Facebook users directly from the web page. An example of a Subscribe Button
Comments Adds a comment about a piece of content on the web page. An example of Comments
Like Box Lets visitors like your Facebook Page and view its stream directly from your website. An example of a Like Box
Login Button Adds a Facebook login button and optionally shows profile pictures of a visitor’s friends who have already signed up to the website. An example of a Login Button
Facepile Displays Facebook user profile pictures of visitors who have liked your page or have signed up to the website. An example of a Face Pile

Top of Page Top of Page

Add a Facebook plugin to a web page

It’s a good idea to first think about which plugins you want to use, and where you want to add the plugins to your website or specific web pages. For more information on each plugin, see Facebook Plugins.

  1. Navigate to the web page for which you want to add a Facebook plugin.
  2. Click the Page tab, and then in the Edit group, click Edit.
  3. Place your cursor on the page where you want the Facebook plugin to appear.
  4. Click the Insert tab, under Parts click Social Plugins, and then do one of the following:
  5. If the Facebook plugins have not been added to your site, you are taken to the SharePoint Store. Do the following:
  1. Under Categories, click Public-facing Websites, locate the Facebook plugins app, and then click Add It.
  2. Log in with your Microsoft Account (such as myemail@Outlook.com), and then confirm the download operation. For more information about Microsoft Accounts, see Add an app from the SharePoint Store.
  3. In the Do you Trust Facebook Integration dialog box, click Trust It. To work properly, the Facebook plugins require additional permissions to site resources.
  4. On the Site Contents page, click the Facebook plugins tile (Facebook Integration).

 Tip    Click the ellipsis for more commands, including this help information.

  1. To activate the Facebook app, click Enable corresponding to Facebook Social Integration Addin.
  2. Repeat steps 1 through 4 at the beginning of the procedure.
  1. Under Parts, select the plugin, and then under About the Parts click Add.

If you do not see a plugin, you may need to enable it. For more information, see Enable or disable the Facebook plugins.

  1. To customize the plugin, click Edit Snippet at the bottom of the frame. For more information, see the section Customizing the Facebook plugin styles.
  2. When finished editing the web page, click Save or Save and Publish.

In the video below, you can watch a quick demo of adding the Facebook Social Integration app to a web page (at 3:15 in the video).

Top of Page Top of Page

Customizing the Facebook plugin styles

You may want to customize the Facebook plugins, such as adjusting the size of the frame, removing photos, or controlling the number of comments displayed, by editing the code snippet of each plugin. For example the code snippet of Activity Feed is the following:

<div class="fb-activity" data-width="300" data-height="300" data-header="true" data-recommendations="false"></div>

 Important    Do not change the class attribute of the DIV tag that encloses the code snippet.

The following table summarizes the default attributes for each plugin and the changes you can make.

Plugin Attribute and default value Comments
Like Button data-send="true" Enter “false” to remove the Send button.
data-width="450" Enter the width in pixels.
data-show-faces="true” Enter “false” to remove face photos.
Activity Feed data-width="300" Enter the width in pixels.
data-height="300" Enter the height in pixels.
data-header="true" Enter “false” to turn the header off.
data-recommendations="false" Enter “true” to display recommendations.
Recommendations Box data-width="300" Enter the width in pixels.
data-height="300" Enter the height in pixels.
data-header="true" Enter “false” to turn the header off.
Subscribe Button data-show-faces="true" Enter “false” to not display face photos.
data-width="450" Enter the width in pixels.
data-href="" Enter the URL for the Facebook page of the users.
Comments data-num-posts="2" Enter the number of posts to display at once.
data-width="470" Enter the width in pixels.
data-href="" Enter the maximum number of rows of profile pictures to show.
Like Box data-width="292" Enter the width in pixels.
data-show-faces="true" Enter “false” to remove face photos.
data-stream="true" Enter “false” to remove the profile stream for the public profile.
data-header="true" Enter “false” to turn the header off.
data-href="" Enter the URL for the Facebook page of the users.
Login Button data-show-faces="true" Enter “false” to remove face photos.
data-width="200" Enter the width in pixels.
data-max-rows="1" Enter the maximum number of rows of profile pictures to show.
Facepile data-max-rows="1" Enter the maximum number of rows of profile pictures to show.
data-width="300" Enter the width in pixels.
data-href="" Enter the URL for the Facebook page of the users.
Send Button (Not applicable)

Top of Page Top of Page

Enable, disable, or customize the Facebook plugins

Once the Facebook plugins have been added to your website, you can enable or disable the app itself, or each individual plugin.

  1. On your website, click Settings SharePoint Online Public Website Settings button and choose Site contents.
  2. On the Site Contents page, click the Facebook plugins tile (Facebook Integration).

 Tip    Click the ellipsis for more commands, including this help information.

  1. To activate or deactivate the Facebook app, click the Enable or Disable buttons corresponding to Facebook Social Integration Addin.
  2. For each plugin, do the following:
  1. To activate or deactivate the specific plugin, click the corresponding Enable or Disable.
  2. To customize the default Facebook plugin style, click Configure. For more information, see the section Customizing the Facebook plugin styles.
  3. To get more information, Go to Facebook to get more styles. For example, the default font style may conflict with your page style, and you can find how to change the font style here.

Top of Page Top of Page

Map Open Graph properties on the web page

An Open Graph social network Open Graph is a way for Facebook to create stories about people’s lives and easily share these stories with their network of friends. The Facebook plugins integrate with Open Graph, and you can enhance these plugins by automatically mapping Open Graph metadata to web page properties (<meta> tags in the <HEAD> section of the page). Therefore, you can customize what displays on Facebook when a visitor clicks the Like button. For example, you can add a picture, a text message, contact information, links to other sites, and so on.

For more information about mapping Open Graph metadata to page properties, see Technical Guides: Open Graph.

The default values are summarized in the following table.

Open Graph metadata Web page property Description
og:title Page.Title Displays a title on the open graph, such as “Contoso Bistro”.
og:type Page.Facebook Object Type Displays the type of information on the open graph, such as “Restaurants”.
og:image Page.Facebook Image Displays a picture on the open graph, such as the Contoso Bistro logo.

Procedure

   
  1. On your website, click Settings SharePoint Online Public Website Settings button and choose Site contents.
  2. On the Site Contents page, click the Facebook plugins tile (Facebook Integration).

 Tip    Click the ellipsis for more commands, including this help information.

  1. Click Click here to configure page property mappings.

Under Page property mappings, do one of the following:

Update a mapping

   
  • Under page properties, select a property from the drop-down list corresponding to the Open Graph metadata.

Add a mapping

   
  1. Click Add new mapping.
  2. Under metadata, add a valid Open Graph metadata name.
  3. Under page properties, select a property from the drop-down list corresponding to the Open Graph metadata.

Remove a mapping

   
  • Click the Remove command corresponding to the Open Graph metadata and its current page property mapping.
  1. Click Save.

Top of Page Top of Page

Learn more

See Public Website help for Office 365.

Top of Page Top of Page

 
 
Applies to:
SharePoint Online Website