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.
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
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. |
 |
| 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. |
 |
| 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. |
 |
| Send Button |
Sends content to a visitor’s friends. |
 |
| Subscribe Button |
Subscribes to other Facebook users directly from the web page. |
 |
| Comments |
Adds a comment about a piece of content on the web page. |
 |
| Like Box |
Lets visitors like your Facebook Page and view its stream directly from your website. |
 |
| 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. |
 |
| Facepile |
Displays Facebook user profile pictures of visitors who have liked your page or have signed up to the website. |
 |
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.
- Navigate to the web page for which you want to add a Facebook plugin.
- Click the Page tab, and then in the Edit group, click Edit.
- Place your cursor on the page where you want the Facebook plugin to appear.
- Click the Insert tab, under Parts click Social Plugins, and then do one of the following:
- If the Facebook plugins have not been added to your site, you are taken to the SharePoint Store. Do the following:
- Under Categories, click Public-facing Websites, locate the Facebook plugins app, and then click Add It.
- Log in with your Microsoft Account (such as myemail@hotmail.com), and then confirm the download operation. For more information about Microsoft Accounts, see Add an app from the SharePoint Store.
- In the Do you Trust Facebook Integration dialog box, click Trust It. To work properly, the Facebook plugins require additional permissions to site resources.
- On the Site Contents page, click the Facebook plugins tile (Facebook Integration).
Tip Click the ellipsis … for more commands, including this help information.
- To activate the Facebook app, click Enable corresponding to Facebook Social Integration Addin.
- Repeat steps 1 through 4 at the beginning of the procedure.
- 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.
- To customize the plugin, click Edit Snippet at the bottom of the frame. For more information, see the section Customizing the Facebook plugin styles.
- 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
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
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.
- On your website, click Settings
and choose Site contents.
- On the Site Contents page, click the Facebook plugins tile (Facebook Integration).
Tip Click the ellipsis … for more commands, including this help information.
- To activate or deactivate the Facebook app, click the Enable or Disable buttons corresponding to Facebook Social Integration Addin.
- For each plugin, do the following:
- To activate or deactivate the specific plugin, click the corresponding Enable or Disable.
- To customize the default Facebook plugin style, click Configure. For more information, see the section Customizing the Facebook plugin styles.
- 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
Map Open Graph properties on the web page
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
- On your website, click Settings and choose Site contents.
- On the Site Contents page, click the Facebook plugins tile (Facebook Integration).
Tip Click the ellipsis … for more commands, including this help information.
- 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
- Click Add new mapping.
- Under metadata, add a valid Open Graph metadata name.
- 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.
- Click Save.
Top of Page
Learn more
See Public Website help for Office 365.
Top of Page
