{"__v":16,"_id":"54737d5f1a20c70800e1895f","category":{"__v":6,"_id":"546b9082b47b5d1400109ee0","pages":["54737d5f1a20c70800e1895f","54737d801a20c70800e18961","54737d95007eb108007e03a8","547381da007eb108007e03c7","547382311a20c70800e1897a","55761ac11ce9e6370050137b"],"project":"545137a814af501a00b50cf9","version":"545137a814af501a00b50cfc","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-11-18T18:31:30.383Z","from_sync":false,"order":8,"slug":"yammer-embed","title":"Yammer Embed"},"parentDoc":null,"project":"545137a814af501a00b50cf9","user":"5433099f9a2b451a00ad4531","version":{"__v":11,"_id":"545137a814af501a00b50cfc","project":"545137a814af501a00b50cf9","createdAt":"2014-10-29T18:53:28.525Z","releaseDate":"2014-10-29T18:53:28.525Z","categories":["545137a814af501a00b50cfd","545138eaa66f020800dbab4a","546b9072b47b5d1400109edf","546b9082b47b5d1400109ee0","546b9088b47b5d1400109ee1","546b909462515a14007ebc43","546b90a0b47b5d1400109ee2","546ced235884600e007a92f6","5481008eea7fd40b00cd7c2b","573b9d83ee2b3b220042291f","57be1efa15efc70e006a5f99"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":["54dd8b64c48ad90d00c186e9","5531470229603d2300011396","5575f0b4acd0472d000aca6f","56322ac4dcc27a170082360f","563779f77ca5de0d00286a59","56ca3c86defce021002fba7f","574dbffdfb835c0e00ca3277","57feb0ee894ceb2200f37ddd","5909e8349b1ddb2500adee64"],"next":{"pages":[],"description":""},"createdAt":"2014-11-24T18:47:59.824Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":0,"body":"To display data 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**Prerequisites**\n\nTo use Embed you need a HTML container 400 pixels or larger in your application. See [here](https://products.office.com/en-US/office-system-requirements#Browsers-section) for a list of supported browsers.\n*Note: Since we require an HTML container at least 400 pixels wide, utilizing the display:none attribute on the container will prevent Embed from displaying properly. Also, rendering Yammer Embed with the display:none property causes issues in Internet Explorer and should not be used. If you need to implement a hidden Yammer Embed widget that will later be shown, the best option is to implement a positioning strategy.*\n\n**Usage**\n\nUsing embed, you can display My Feed, a Group Feed, a Topic Feed, a User Feed or an OG object feed. Users will need to log in to view the feed (including feeds from External networks). Additionally, the feed is restricted to users of the network specified (see below).\n\n**My Feed**\n\nTo display My Feed, add the following embed code to your HTML page. Note: Height, Width values are for illustrative purposes only. Please set your own as desired.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE HTML>\\n<html>\\n<head></head>\\n<body>\\n    <script type=\\\"text/javascript\\\" src=\\\"https://c64.assets-yammer.com/assets/platform_embed.js\\\"></script>\\n    <div id=\\\"embedded-feed\\\" style=\\\"height:400px;width:500px;\\\"></div> \\n    <script>\\n        yam.connect.embedFeed({\\n            container: '#embedded-feed',\\n            network: 'fourleaf.com'  // network permalink (see below)\\n        });\\n    </script>\\n</body>\\n</html>\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nTo retrieve the feed ID and network permalink, please navigate to the feed in the Yammer web application and copy it from the URL:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/D8PH3kRXednrFeyJXT9g_embed-feed.png\",\n        \"embed-feed.png\",\n        \"866\",\n        \"467\",\n        \"#496a9c\",\n        \"\"\n      ],\n      \"caption\": \"You can also get the HTML for Embed from the “Embed This Feed” link shown above.\"\n    }\n  ]\n}\n[/block]\n**Specified Feed**\n\nTo display a Group Feed, a Topic Feed, a User Feed add the following embed code to your HTML page. Note that you can also generate this code for a specific group feed via the “Embed this feed” quick link in the right sidebar of any group (see the screenshot above). Note: Height, Width values are for illustrative purposes only. Please set your own as desired.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://c64.assets-yammer.com/assets/platform_embed.js\\\"></script>\\n<div id=\\\"embedded-feed\\\" style=\\\"height:400px;width:500px;\\\"></div>\\n<script>\\n    yam.connect.embedFeed({\\n        container: '#embedded-feed',\\n        network: 'fourleaf.com',\\n        feedType: 'group',                // can be 'group', 'topic', or 'user'    \\n        feedId: '123',                     // feed ID from the instructions above\\n        config: {\\n             defaultGroupId: 3257958      // specify default group id to post to \\n        }\\n    });    \\n</script>\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n**Open Graph Feed**\n\nTo display an Open Graph feed of a URL place the following embed code to your HTML page. Note: Height, Width values are for illustrative purposes only. Please set your own as desired.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://c64.assets-yammer.com/assets/platform_embed.js\\\"></script>\\n<div id=\\\"embedded-feed\\\" style=\\\"height:400px;width:500px;\\\"></div>\\n<script>\\nyam.connect.embedFeed({\\n    container: '#embedded-feed',\\n    network: 'contoso.com',\\n    feedType: 'open-graph',\\n    feedId: '',\\n    objectProperties: { \\n        url: 'http://www.opengraphpage.com/',\\n        type: 'page'\\n    }\\n});\\n</script>\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"embed","type":"basic","title":"Embed Feed"}
To display data 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. **Prerequisites** To use Embed you need a HTML container 400 pixels or larger in your application. See [here](https://products.office.com/en-US/office-system-requirements#Browsers-section) for a list of supported browsers. *Note: Since we require an HTML container at least 400 pixels wide, utilizing the display:none attribute on the container will prevent Embed from displaying properly. Also, rendering Yammer Embed with the display:none property causes issues in Internet Explorer and should not be used. If you need to implement a hidden Yammer Embed widget that will later be shown, the best option is to implement a positioning strategy.* **Usage** Using embed, you can display My Feed, a Group Feed, a Topic Feed, a User Feed or an OG object feed. Users will need to log in to view the feed (including feeds from External networks). Additionally, the feed is restricted to users of the network specified (see below). **My Feed** To display My Feed, add the following embed code to your HTML page. Note: Height, Width values are for illustrative purposes only. Please set your own as desired. [block:code] { "codes": [ { "code": "<!DOCTYPE HTML>\n<html>\n<head></head>\n<body>\n <script type=\"text/javascript\" src=\"https://c64.assets-yammer.com/assets/platform_embed.js\"></script>\n <div id=\"embedded-feed\" style=\"height:400px;width:500px;\"></div> \n <script>\n yam.connect.embedFeed({\n container: '#embedded-feed',\n network: 'fourleaf.com' // network permalink (see below)\n });\n </script>\n</body>\n</html>", "language": "text" } ] } [/block] To retrieve the feed ID and network permalink, please navigate to the feed in the Yammer web application and copy it from the URL: [block:image] { "images": [ { "image": [ "https://files.readme.io/D8PH3kRXednrFeyJXT9g_embed-feed.png", "embed-feed.png", "866", "467", "#496a9c", "" ], "caption": "You can also get the HTML for Embed from the “Embed This Feed” link shown above." } ] } [/block] **Specified Feed** To display a Group Feed, a Topic Feed, a User Feed add the following embed code to your HTML page. Note that you can also generate this code for a specific group feed via the “Embed this feed” quick link in the right sidebar of any group (see the screenshot above). Note: Height, Width values are for illustrative purposes only. Please set your own as desired. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://c64.assets-yammer.com/assets/platform_embed.js\"></script>\n<div id=\"embedded-feed\" style=\"height:400px;width:500px;\"></div>\n<script>\n yam.connect.embedFeed({\n container: '#embedded-feed',\n network: 'fourleaf.com',\n feedType: 'group', // can be 'group', 'topic', or 'user' \n feedId: '123', // feed ID from the instructions above\n config: {\n defaultGroupId: 3257958 // specify default group id to post to \n }\n }); \n</script>", "language": "text" } ] } [/block] **Open Graph Feed** To display an Open Graph feed of a URL place the following embed code to your HTML page. Note: Height, Width values are for illustrative purposes only. Please set your own as desired. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://c64.assets-yammer.com/assets/platform_embed.js\"></script>\n<div id=\"embedded-feed\" style=\"height:400px;width:500px;\"></div>\n<script>\nyam.connect.embedFeed({\n container: '#embedded-feed',\n network: 'contoso.com',\n feedType: 'open-graph',\n feedId: '',\n objectProperties: { \n url: 'http://www.opengraphpage.com/',\n type: 'page'\n }\n});\n</script>", "language": "text" } ] } [/block]