{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Embed Feed","type":"basic","slug":"new-embed-feed","excerpt":"For networks on the new Yammer","body":"To display feeds from Yammer in your HTML based application, Yammer provides embeddable JavaScript widgets that display a snapshot of a specified feed and function as a scaled-down version of Yammer. \n\n*Note: We are rolling out a widget configuration site by June 2021 to allow users to create, customize, and retrieve the code. *\n\n**Prerequisites **\n\nTo use Embed you need an HTML container 400 pixels or larger in your application.  \n\nMicrosoft 365 apps and services will not support Internet Explorer 11 starting August 17, 2021 (Microsoft Teams will not support Internet Explorer 11 earlier, starting November 30, 2020). Learn more. Please note that Internet Explorer 11 will remain a supported browser. Internet Explorer 11 is a component of the Windows operating system and follows the Lifecycle Policy for the product on which it is installed. \n\n**Usage and Limitations **\n\nUsing embed, you can display a single My Feed, Group Feed, Topic Feed, User Feed or Web Link Feed (formerly called Open Graph Feed).  \n\nEmbeds that attempt to access a feed from an external network will be redirected to use the existing classic Yammer Embeds. We are currently still working on supporting the existing 'defaultGroupId' configuration, which will allow for home, user, topic, and web link feeds to post to the provided group feed. Currently, if home, topic, or user feeds are used with a defaultGroupId configured, the feed will be set to the community feed of the defaultGroupId. The defaultGroupId parameter is invalid for community feeds and will set the publisher to the provided defaultGroupId for Open Graph feeds. Users attempting to load the Embeds on IE11 will be redirected to use the existing classic Yammer Embeds.\n\n**Embedding the Home Feed **\n\n*Retrieving the code manually*\n\nCopy and paste the code below to your HTML based application and replace the network URL. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"embedded-feed\\\" style=\\\"height:800px; width:400px;\\\"></div> \\n<script type=\\\"text/javascript\\\" src=\\\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\\\"></script> \\n  <script type=\\\"text/javascript\\\"> \\n      yam.connect.embedFeed({ \\n          container: \\\"#embedded-feed\\\", \\n          network: \\\"<network URL>\\\", \\n          feedType: \\\"home\\\"      }); \\n  </script> \\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Embedding a Community Feed **\n\n*Retrieving the code from the community page *\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/97bafb3-overflow.png\",\n        \"overflow.png\",\n        1356,\n        1228,\n        \"#333\"\n      ],\n      \"caption\": \"Navigate to the community on Yammer. In the header's overflow menu, select 'Embed Community Feed'.\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e1a460e-embed_feed_lightbox.png\",\n        \"embed feed lightbox.png\",\n        1408,\n        804,\n        \"#333\"\n      ],\n      \"caption\": \"Copy and paste the generated code to your HTML based application.\"\n    }\n  ]\n}\n[/block]\n*Retrieving the code manually *\n\nNavigate to the community feed in Classic Yammer, users in the New Yammer will need to toggle back to the Classic experience – we are rolling out a widget configuration site by June 2021 to allow users to create, customize, and retrieve the code. \n\n1. Identify the feed ID in the URL: https://www.yammer.com/m365x097875.onmicrosoft.com/#/threads/inGroup?type=in_group&feedId=<feed ID> \n\n2. Copy and paste the code below to your HTML based application, replacing the network URL and feed ID. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"embedded-feed\\\" style=\\\"height:800px; width:400px;\\\"></div>   \\n<script type=\\\"text/javascript\\\" src=\\\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\\\"></script>   \\n<script type=\\\"text/javascript\\\">       \\nyam.connect.embedFeed({           \\ncontainer: \\\"#embedded-feed\\\",           \\nnetwork: \\\"<network URL>\\\",           \\nfeedType: \\\"group\\\",          \\nfeedId: \\\"<feed ID>\\\"      });   \\n</script> \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Embedding a User or Topic Feed **\n\n*Retrieving the code manually *\n\nNavigate to the user or topic feed in Classic Yammer, users in the New Yammer will need to toggle back to the Classic experience – we are rolling out a widget configuration site by June 2021 to allow users to create, customize, and retrieve the code. \n\n1. Identify the feed ID in the URL \n\n  * For user feeds: https://www.yammer.com/m365x097875.onmicrosoft.com/#/users/<feed ID> \n  * For topic feeds: https://www.yammer.com/m365x097875.onmicrosoft.com/topics/65150730240#/Threads/AboutTopic?type=about_topic&feedId=<feed ID> \n\n2. Copy and paste the code below to your HTML based application, replacing the network URL and feed ID. \n\nFor user feeds: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"embedded-feed\\\" style=\\\"height:800px; width:400px;\\\"></div>   \\n<script type=\\\"text/javascript\\\" src=\\\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\\\"></script>   \\n<script type=\\\"text/javascript\\\">       \\nyam.connect.embedFeed({           \\ncontainer: \\\"#embedded-feed\\\",           \\nnetwork: \\\"<network URL>\\\",           \\nfeedType: \\\"user\\\",          \\nfeedId: \\\"<feed ID>\\\"      });   \\n</script> \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nFor topic feeds: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"embedded-feed\\\" style=\\\"height:800px; width:400px;\\\"></div>   \\n<script type=\\\"text/javascript\\\" src=\\\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\\\"></script>   \\n<script type=\\\"text/javascript\\\">       \\nyam.connect.embedFeed({           \\ncontainer: \\\"#embedded-feed\\\",           \\nnetwork: \\\"<network URL>\\\",           \\nfeedType: \\\"topic\\\",          \\nfeedId: \\\"<feed ID>\\\"      });   \\n</script> \\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Embedding an Attachable Link Feed (previously, ‘Open Graph’ Feed) **\n\n*Retrieving the code manually *\n\nCopy and paste the code below to your HTML based application, replacing the network URL and URL parameter with the link. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"embedded-feed\\\" style=\\\"height:800px; width:400px;\\\"></div>   \\n<script type=\\\"text/javascript\\\" src=\\\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\\\"></script>   \\n<script type=\\\"text/javascript\\\">       \\nyam.connect.embedFeed({           \\ncontainer: \\\"#embedded-feed\\\",           \\nnetwork: \\\"m365x097875.onmicrosoft.com\\\",           \\nfeedType: \\\"open-graph\\\",          \\nobjectProperties: { \\n\\turl: '<URL>'}    });   \\n</script> \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Customizing the Yammer Embeds**\n\nChange the theme, set custom publisher prompts, and more with the following customizations. For each customization, simply add the respective parameter and value to code, all customizations should be grouped into a “config: {}” parameter passed in. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"yam.connect.embedFeed({ \\n\\\"feedType\\\": \\\"home\\\", \\n  config: { \\n\\theader: false, \\n\\tpromptText: \\\"Post to All Company\\\", \\n\\thideNetworkName: true \\n\\t} \\n}); \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n*Header *\n\nBy default will display a header with your network name at the top of the feed, header=true. To hide the header, set header=false. \n\n*Network Name *\n\nOnly available when header is not set or when header=true. By default will display the network name in the header, hideNetworkName=false. To hide the network name, set hideNetworkName=true. \n\n*Footer *\n\nBy default will display a footer at the bottom of the feed, with the Yammer logo and an option for user to sign out, footer=true. To hide the footer, set footer=false. \n\n*Light/Dark Mode *\n\nBy default the embedded feeds are in light mode, theme=light. To use dark mode, set theme=dark. \n\n*Custom Publisher Prompt *\n\nFor feeds with publishers (home, community, attachable link with default community to post to set), set promptText=“Your custom publisher prompt text here” to override the existing publisher prompt text with your own. \n\n*Attachable Link Preview (Attachable Link Feed only) *\n\nBy default does not display a link preview, if you’d like to display a link preview above the feed, set ShowOpenGraphPreview=true. \n\n*Height and Width *\n\nChange the height and width configurations in the script to your liking.","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"605d4efd02299c0038c429eb","createdAt":"2021-03-26T03:03:25.284Z","user":"5f8f4ab7f9d8900054ca07d3","category":{"sync":{"isSync":false,"url":""},"pages":["54737d5f1a20c70800e1895f","54737d801a20c70800e18961","54737d95007eb108007e03a8","547381da007eb108007e03c7","547382311a20c70800e1897a","55761ac11ce9e6370050137b"],"title":"Yammer Embed","slug":"yammer-embed","order":7,"from_sync":false,"reference":false,"_id":"546b9082b47b5d1400109ee0","project":"545137a814af501a00b50cf9","version":"545137a814af501a00b50cfc","__v":6,"createdAt":"2014-11-18T18:31:30.383Z"},"version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":true,"is_hidden":false,"is_deprecated":false,"categories":["545137a814af501a00b50cfd","545138eaa66f020800dbab4a","546b9072b47b5d1400109edf","546b9082b47b5d1400109ee0","546b9088b47b5d1400109ee1","546b909462515a14007ebc43","546b90a0b47b5d1400109ee2","546ced235884600e007a92f6","5481008eea7fd40b00cd7c2b","573b9d83ee2b3b220042291f","57be1efa15efc70e006a5f99","5ee004f52c97b4004c7a5876"],"_id":"545137a814af501a00b50cfc","project":"545137a814af501a00b50cf9","__v":12,"createdAt":"2014-10-29T18:53:28.525Z","releaseDate":"2014-10-29T18:53:28.525Z"},"project":"545137a814af501a00b50cf9","__v":0,"parentDoc":null}

Embed Feed

For networks on the new Yammer

To display feeds from Yammer in your HTML based application, Yammer provides embeddable JavaScript widgets that display a snapshot of a specified feed and function as a scaled-down version of Yammer. *Note: We are rolling out a widget configuration site by June 2021 to allow users to create, customize, and retrieve the code. * **Prerequisites ** To use Embed you need an HTML container 400 pixels or larger in your application. Microsoft 365 apps and services will not support Internet Explorer 11 starting August 17, 2021 (Microsoft Teams will not support Internet Explorer 11 earlier, starting November 30, 2020). Learn more. Please note that Internet Explorer 11 will remain a supported browser. Internet Explorer 11 is a component of the Windows operating system and follows the Lifecycle Policy for the product on which it is installed. **Usage and Limitations ** Using embed, you can display a single My Feed, Group Feed, Topic Feed, User Feed or Web Link Feed (formerly called Open Graph Feed). Embeds that attempt to access a feed from an external network will be redirected to use the existing classic Yammer Embeds. We are currently still working on supporting the existing 'defaultGroupId' configuration, which will allow for home, user, topic, and web link feeds to post to the provided group feed. Currently, if home, topic, or user feeds are used with a defaultGroupId configured, the feed will be set to the community feed of the defaultGroupId. The defaultGroupId parameter is invalid for community feeds and will set the publisher to the provided defaultGroupId for Open Graph feeds. Users attempting to load the Embeds on IE11 will be redirected to use the existing classic Yammer Embeds. **Embedding the Home Feed ** *Retrieving the code manually* Copy and paste the code below to your HTML based application and replace the network URL. [block:code] { "codes": [ { "code": "<div id=\"embedded-feed\" style=\"height:800px; width:400px;\"></div> \n<script type=\"text/javascript\" src=\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\"></script> \n <script type=\"text/javascript\"> \n yam.connect.embedFeed({ \n container: \"#embedded-feed\", \n network: \"<network URL>\", \n feedType: \"home\" }); \n </script> \n", "language": "html" } ] } [/block] **Embedding a Community Feed ** *Retrieving the code from the community page * [block:image] { "images": [ { "image": [ "https://files.readme.io/97bafb3-overflow.png", "overflow.png", 1356, 1228, "#333" ], "caption": "Navigate to the community on Yammer. In the header's overflow menu, select 'Embed Community Feed'." } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/e1a460e-embed_feed_lightbox.png", "embed feed lightbox.png", 1408, 804, "#333" ], "caption": "Copy and paste the generated code to your HTML based application." } ] } [/block] *Retrieving the code manually * Navigate to the community feed in Classic Yammer, users in the New Yammer will need to toggle back to the Classic experience – we are rolling out a widget configuration site by June 2021 to allow users to create, customize, and retrieve the code. 1. Identify the feed ID in the URL: https://www.yammer.com/m365x097875.onmicrosoft.com/#/threads/inGroup?type=in_group&feedId=<feed ID> 2. Copy and paste the code below to your HTML based application, replacing the network URL and feed ID. [block:code] { "codes": [ { "code": "<div id=\"embedded-feed\" style=\"height:800px; width:400px;\"></div> \n<script type=\"text/javascript\" src=\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\"></script> \n<script type=\"text/javascript\"> \nyam.connect.embedFeed({ \ncontainer: \"#embedded-feed\", \nnetwork: \"<network URL>\", \nfeedType: \"group\", \nfeedId: \"<feed ID>\" }); \n</script> ", "language": "html" } ] } [/block] **Embedding a User or Topic Feed ** *Retrieving the code manually * Navigate to the user or topic feed in Classic Yammer, users in the New Yammer will need to toggle back to the Classic experience – we are rolling out a widget configuration site by June 2021 to allow users to create, customize, and retrieve the code. 1. Identify the feed ID in the URL * For user feeds: https://www.yammer.com/m365x097875.onmicrosoft.com/#/users/<feed ID> * For topic feeds: https://www.yammer.com/m365x097875.onmicrosoft.com/topics/65150730240#/Threads/AboutTopic?type=about_topic&feedId=<feed ID> 2. Copy and paste the code below to your HTML based application, replacing the network URL and feed ID. For user feeds: [block:code] { "codes": [ { "code": "<div id=\"embedded-feed\" style=\"height:800px; width:400px;\"></div> \n<script type=\"text/javascript\" src=\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\"></script> \n<script type=\"text/javascript\"> \nyam.connect.embedFeed({ \ncontainer: \"#embedded-feed\", \nnetwork: \"<network URL>\", \nfeedType: \"user\", \nfeedId: \"<feed ID>\" }); \n</script> ", "language": "html" } ] } [/block] For topic feeds: [block:code] { "codes": [ { "code": "<div id=\"embedded-feed\" style=\"height:800px; width:400px;\"></div> \n<script type=\"text/javascript\" src=\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\"></script> \n<script type=\"text/javascript\"> \nyam.connect.embedFeed({ \ncontainer: \"#embedded-feed\", \nnetwork: \"<network URL>\", \nfeedType: \"topic\", \nfeedId: \"<feed ID>\" }); \n</script> \n", "language": "html" } ] } [/block] **Embedding an Attachable Link Feed (previously, ‘Open Graph’ Feed) ** *Retrieving the code manually * Copy and paste the code below to your HTML based application, replacing the network URL and URL parameter with the link. [block:code] { "codes": [ { "code": "<div id=\"embedded-feed\" style=\"height:800px; width:400px;\"></div> \n<script type=\"text/javascript\" src=\"https://canary-azure.assets-yammer.com/assets/platform_embed.js\"></script> \n<script type=\"text/javascript\"> \nyam.connect.embedFeed({ \ncontainer: \"#embedded-feed\", \nnetwork: \"m365x097875.onmicrosoft.com\", \nfeedType: \"open-graph\", \nobjectProperties: { \n\turl: '<URL>'} }); \n</script> ", "language": "html" } ] } [/block] **Customizing the Yammer Embeds** Change the theme, set custom publisher prompts, and more with the following customizations. For each customization, simply add the respective parameter and value to code, all customizations should be grouped into a “config: {}” parameter passed in. [block:code] { "codes": [ { "code": "yam.connect.embedFeed({ \n\"feedType\": \"home\", \n config: { \n\theader: false, \n\tpromptText: \"Post to All Company\", \n\thideNetworkName: true \n\t} \n}); ", "language": "html" } ] } [/block] *Header * By default will display a header with your network name at the top of the feed, header=true. To hide the header, set header=false. *Network Name * Only available when header is not set or when header=true. By default will display the network name in the header, hideNetworkName=false. To hide the network name, set hideNetworkName=true. *Footer * By default will display a footer at the bottom of the feed, with the Yammer logo and an option for user to sign out, footer=true. To hide the footer, set footer=false. *Light/Dark Mode * By default the embedded feeds are in light mode, theme=light. To use dark mode, set theme=dark. *Custom Publisher Prompt * For feeds with publishers (home, community, attachable link with default community to post to set), set promptText=“Your custom publisher prompt text here” to override the existing publisher prompt text with your own. *Attachable Link Preview (Attachable Link Feed only) * By default does not display a link preview, if you’d like to display a link preview above the feed, set ShowOpenGraphPreview=true. *Height and Width * Change the height and width configurations in the script to your liking.