Recently I was asked by a customer if we could replace the SharePoint Newsfeed by a Yammer feed. He wanted to filter out discussions based out on the page where the discussion was created, but also wanted to have one central place for all the feeds. Using Yammer Feed also provides a way to access the feed with the Yammer mobile app.

The SharePoint Newfeed is present in the home page of a team site and provides a way to have a feed on the home page or other pages. The SharePoint NewsFeed provides a site feed, when you add the WebPart to multilpage pages you see all the feeds for the site.

The look is very similar between the two feeds.

SharePoint NewsFeed Yammer Feed

We started by creating a new Yammer Feed called Page Conversation.

1. Logon to your Yammer Network

2. Create a new group called Page Conversation

3. Retrieve the FeedId of the group

The group FeedId will be required later to generate the embed code. You can find the FeedId in the URL of the Yammer group

Once the Yammer group is created we needed to generate the code to embed in the page.

1. To generate the embedded code to add to our SharePoint page, you need to go to this page https://www.yammer.com/widget/configure.

In order to filter the Yammer Feed based on the page where it was created, you need to use Open Graph as the Feed Type and Page for the OpenGraph type.

See the image below for the configuration options:

Note: make sure to replace the Network permalink value by your Network and the Default group_id by the FeedId of the group that you created.

2. Once you click on Apply Changes, the embed code will be generated and will appear in the bottom left of this page.

Copy the code to notepad.

3. Adjusting the code

In order for the code to run on the SharePoint page, you need to add the following lines at the beginning of the generated code.

092916_1345_EmbedaYamme8.png

And the following two line at the end

092916_1345_EmbedaYamme9.png

Explanation of the added lines:

The following line is necessary to call the Yammer JS library.

<script type=”text/javascript” src=”https://c64.assets-yammer.com/assets/platform_embed.js”></script>

Tips: Add *.yammer.com in Internet Explorer Trusted zone.

The following div will help to make sure the width of the WebPart will stay aligned with the other WebParts on the page

<div id=”embedded-feed” style=”height:800px;min-width:350px;”></div>

The following function is to make sure the the code will only load when the page is completely load, to avoid conflict with the page load of the other components on the page

window.onload = function () {

Adding the code to a page

You can add the code to a page in many different way. In this demonstration we will use a script editor WebPart.

1. Create or edit and existing Wiki page

2. Add a Script WebPart to your page

3. Edit the Script Editor WebPart to add the code snippet

4. Paste your code and click insert and save your page

5. You can repeat the steps to add the script editor WebPart (and the code) in multiple pages.

Each pages will display only the feed that was created in the page.

If you access the Yammer group from Yammer.com, the 2 conversations are shown in the Yammer Group

In another article I will explain how to create and publish a Yammer Page Feed Web Part to the WebPart Library so it can be easily re-used in any pages.

Advertisements