Overview Of Facebook Social Plugins And How They Can Help You Integrate Social In Your SharePoint 2013 Website

Facebook offers a number of standard plugins that you can use to integrate with Facebook on your website. The overview of all available plugins is published at https://developers.facebook.com/docs/plugins/. Following is an overview of some of the plugins and how you can integrate them with your website.

Before you start: Insights

When integrating with Facebook, you can add one or more widgets to your website. Although this will allow your visitors to interact with your website using Facebook plugins, it will provide you with very little feedback about how your visitors leverage the social media capabilities that you have provided them with. The great news is that if you want to get more information about the usage of Facebook social plugins on your website, you can benefit from the Insights capability that Facebook offers you. After registering your website as a Facebook app and including the app ID in your website, you will get access to analytics information regarding the usage of Facebook on your website from all the widgets.

More information about Facebook Insights is available at https://developers.facebook.com/docs/insights/

Like Button

The Facebook Like button is probably the most popular Facebook social plugin. With a single mouse click your visitors can let their friends know that they like a page on your website. As a result your page and even your whole website might get some extra attention.

Although you might want to include the Like Button on every page on your web page, it might be most effective on detail pages that contain the essential content your visitors are looking for. Integrating the Facebook Like Button on your website is easy and comes down to including two HTML snippets in your websites.

First there is the Facebook SDK call that should be included once per page directly after the body tag:

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

If you have registered your website as a Facebook app, you should include your app ID (underlined) in this snippit:

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=0123456789“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Because this HTML snippet is shared between all pages on your website, the way to include it in your SharePoint website is to make it a part of your Master Page, as shown in figure 1.

Figure 1. Code snippet Master Page with Facebook code included

The second code snippet that you have to include is the Like Button itself:

Because the placement of the Like Button might vary per page, the best way to integrate it on your website is to include it in the Page Layout.

According to the Like Button guidelines, the Like Button has to contain the absolute URL of the page on which it is integrated. In the code sample above the absolute URL is included in the data-href attribute. Because we want to place the code on the Page Layout we don’t want to include a fixed URL. Instead we want to inject the URL of the current page rendered using the
Page Layout. Considering that SharePoint 2013 offers support for physical as well as Friendly URLs, the best way to get the URL of the current page is to use the SharePoint 2013 Canonical URL control. Combined with the Like Button HTML code snippet, it would look as follows:

<!–SPM:<%@Register Tagprefix=”Contoso” Namespace=”Contoso.SharePoint.Seo.Controls” Assembly=”Contoso.SharePoint.Seo, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a285ef6967f781d3″%>–>
<!–MS:<Contoso:HyperlinkControlWrapper runat=”server”>–>
<Control>
<control type=”Microsoft.SharePoint.Publishing.WebControls.SeoCanonicalLink” assembly=”Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
</Control>
<ContentTemplate>
<div class=”fb-like” data-href=”$Url$” data-send=”true” data-width=”450″ data-show-faces=”true”></div>
</ContentTemplate>
<!–ME:</Contoso:HyperlinkControlWrapper>–>

Figure 2. Facebook Like button

When building the Like Button social plugin an interesting option worth considering is including the Send option.

Although designed using a very simple idea, integrating the Like Button on your website can help you expand the reach of your content. An additional benefit that you get from using the Like Button on your website is that combined with the SharePoint 2013 Search Analytics capabilities, you can leverage the event of someone liking a web page on your website. With this information you can for example present content that has been liked on a prominent place on your website, which again increasing your chances for conversion.

Send Button

When building the Like Button social plugin an interesting option worth considering is including the Send option. While clicking the Like option allows your visitors to share your web page with everyone, they can use the Send button to choose with whom they want to share your web page. This offers them more flexibility and lowers the bar for sharing the contents of your website even further.

Figure 3. Facebook Send button

Comments

Publishing original content is a great way for gaining popularity and improving the ranking of your website in search engines. Furthermore, allowing your visitors to provide you with feedback, can help you improve your website to be even more user-friendly and become better tailored to your audience’s interests. Facebook offers the Comments plugin that you can integrate with your website to allow your visitors to comment on your website.

Figure 4. Facebook Comments

Giving your visitors the ability to use Facebook to comment on your content, can be of great benefit both to you and your visitors. Although it might depend on the audience of your website, many people have a Facebook account nowadays. It is easier for them to use their existing Facebook profile to leave a comment on your website rather than following yet another registration process.

Another benefit of using Facebook for comments is that whenever someone comments on your content, that comment will be shared with their friends. Theoretically this allows you to expand your reach even further. However, keep in mind that if the comment isn’t flattering everyone will know it as well.

The process for integrating the Facebook Comments plugin is very similar to integrating the Facebook Like Button. In most scenarios you want the Facebook Comment plugin to appear beneath the content of every page. To do this, you can include it in the content of each Page Layout used within your website.

Similarly to the Facebook Like button, the Comments plugins consists of two code snippets. The first one is exactly the same as for the Facebook Like button, so if you plan to integrate both plugins, you only have to include it once.

The second snippet is the Comments plugin itself. It should be placed where you want it to be displayed in your Page Layout:

Similarly to the Facebook Like button, the data-href attribute should contain the absolute URL of the page for which you want to provide the commenting capability. As this is very likely to be the current page, you could once again benefit of the SeoCanonicalLink control to retrieve the URL of the current page:

<!–SPM:<%@Register Tagprefix=”Contoso” Namespace=”Contoso.SharePoint.Seo.Controls” Assembly=”Contoso.SharePoint.Seo, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a285ef6967f781d3″%>–>
<!–MS:<Contoso:HyperlinkControlWrapper runat=”server”>–>
<Control>
<control type=”Microsoft.SharePoint.Publishing.WebControls.SeoCanonicalLink” assembly=”Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
</Control>
<ContentTemplate>
<div class=”fb-comments” data-href=”$Url$” data-width=”470″ data-num-posts=”10″></div>
</ContentTemplate>
<!–ME:</Contoso:HyperlinkControlWrapper>–>

Activity Feed

Another interesting plugin that Facebook offers for integrating its capabilities on public-facing websites is the Activity Feed plugin.

The Activity Feed plugin shows the recent activity on your website. Whenever someone likes a page within your website, the Activity Feed plugin is used to display the Like in the Activity Feed. Other custom actions custom can also be recorded, stored and presented in the Activity Feed.

Using the Activity Plugin can help your visitors discover new content and with that help you expand the reach of your website. When your visitors are logged in with Facebook, the Activity Feed will show activities that your visitors’ friends have made. As in most situations those are all people that your visitors know and trust. Therefore, the odds are high that they will follow their recommendations and discover new content on your website. If they are not logged in on the other hand, the Activity Feed plugin will show recommendations from across your site and of course suggest logging in to Facebook to show more relevant content.

As with other Facebook plugins, the Activity Feed plugin consists of two HTML snippets required to integrate it with the website. The first one is the Facebook JavaScript SDK snippet that we have seen previously. The second one is the Activity Feed itself:

The configuration of the Activity Feed is straight-forward. Using the data-site attribute you have to specify the domain of your website, and which activity information should be displayed. Using other data attributes you can control the user experience of the Activity Feed on your website, and whether you want to explicitly include recommendations or not.

Although you could place the Activity Feed on every page on your website, there is a chance that this would work against you and distract your visitors from your content. Because the Activity Feed allows you to expand the reach of your website, it might be a better idea to analyze your web analytics data and place the Activity Feed somewhat more strategically, for
example on the frequent exit pages and landing pages such as the home page.

Because in most scenarios you will embed the Activity Feed on specific pages, the best way to integrate it with your website is not to include it in the Master Page or Page Layouts, but to add it to the specific pages. The best way to do this is to embed the Activity Feed code snippet in the page using the Script Editor Web Part.

Figure 5. Embed code

Recommendations Bar

A slightly different, nevertheless very interesting, plugin is the Recommendations Bar. This plugin can also help you expand the reach of your website by displaying recommended content. What’s different about the Recommendations Bar is its usage scenario.

The Recommendations Bar is located at the bottom of the browser window. Depending on its configuration it might become visible after a certain amount of time, for example after users have scrolled past a certain point of the page. This plugin can be very useful because it provides your visitors with suggestions of additional content they might find interesting.

When integrating the Recommendations Bar on your website, you should consider integrating it with the detail pages. That way, when your visitors have finish consuming the current content, they are offered a next step. Once again this plugin requires the reference to the Facebook JavaScript SDK to work. The plugin itself is represented by the following markup:

Because you want recommendations to be visible on every page, you should add it to the Page Layouts used by your detail pages. Following is the markup that you should add to your Page Layouts to ensure that the Recommendations Bar will work for every page. Notice how the contents of the data-href attribute are being set dynamically by using the SeoCanonicalLink control we discussed previously:

<!–SPM:<%@Register Tagprefix=”Contoso” Namespace=”Contoso.SharePoint.Seo.Controls” Assembly=”Contoso.SharePoint.Seo, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a285ef6967f781d3″%>–>
<!–MS:<Contoso:HyperlinkControlWrapper runat=”server”>–>
<Control>
<control type=”Microsoft.SharePoint.Publishing.WebControls.SeoCanonicalLink” assembly=”Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
</Control>
<ContentTemplate>
<div class=”fb-recommendations-bar” data-href=”$Url$”></div>
</ContentTemplate>
<!–ME:</Contoso:HyperlinkControlWrapper>–>

Like all other content, the recommendations that are displayed by the Recommendations Bar are controlled by the activity on your website, and recorded by Facebook. Although the Recommendations Bar will display personalized content suggestions, it doesn’t offer you any control regarding what content will be displayed where. Although the differences in which items are suggested as recommendations might be subtle, they could decide whether or not your visitors will remain on your website.

An alternative to integrating the Facebook Recommendations Bar that is worth considering is using the content recommendations capability provided with SharePoint 2013. Although it would require some customizations to achieve similar user experience as the one that Facebook Recommendations Bar has, the great advantage is that you can control which content is displayed as recommendations. Because content recommendations are based on SharePoint 2013
Search, you can leverage all of its capabilities to ensure that the most relevant recommendations are displayed to your visitors.

Bonus:Yamming it!

If your organization offers products or services to consumers, integrating with Facebook might be a wise choice. If however your business is more based on knowledge and is targeted at other businesses, it might be worth the effort to integrate with Yammer as well. To put it simple: Yammer is Facebook for enterprises. It helps organizations share their knowledge by allowing them to communicate within the boundaries of their organization. Making it easier for your visitors to share the content from your website with their Yammer networks might help you reach more of your business customers.

Although Yammer doesn’t offer as many plugins as Facebook does, one thing that you could easily include in your website is a Yam it button. The Yam it button allows your visitors to share the page that they are currently visiting with their
Yammer network with a single mouse click. Following is sample code of a Yam it button:

The Yam it button is completely based on JavaScript so you can include the above snippet directly in SharePoint without modifying it. From the integration perspective the Yam it button can be best compared with the Facebook Like button, so wherever you feel it is right to include the Facebook Like button, it is probably a good place to include the Yam it button
as well.

Figure 6. Yam It! button

Summary

Integrating social networks with your website can help you expand the reach of your website and help your visitors discover new content. Most social networks offer standard plugins that can be easily integrated within your content management system. SharePoint is no exception here. No matter if you want to integrate social media only on some specific pages or all
pages of a particular type, SharePoint offers you the flexibility to do so effortlessly.

Additional Resources

Scenario: Create SharePoint sites by using cross-site publishing in SharePoint Server 2013

Step-by-step instructions: How to set up a product-centric website in SharePoint Server 2013

Custom SharePoint SEO controls

Leveraging internal controls and APIs using wrapper controls

About the author

Waldek Mastykarz is a Microsoft SharePoint Server MVP and works as a SharePoint consultant at Mavention. Waldek shares his enthusiasm about the SharePoint platform through his blog, articles published in online and off-line magazines and on MSDN SharePoint Forums. He is also a speaker at community events such as the SharePoint conference in London, SharePoint Connections Amsterdam, and SharePoint Saturday. In addition to his job at Mavention, Waldek is a Virtual Technology Solutions Sales Professional for Microsoft Netherlands. In this role he helps answer customer questions around SharePoint Web Content Management (WCM).