{"__v":4,"_id":"56e9b6a0cbeede0e0006e639","category":{"__v":1,"_id":"56e9a50946bfd60e008840a7","pages":["56e9b6a0cbeede0e0006e639"],"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-03-16T18:25:13.612Z","from_sync":false,"order":4,"slug":"recommend","title":"Recommend"},"parentDoc":null,"project":"564de2dbfe07a81700b5c3a5","user":"564de2b4fe07a81700b5c3a4","version":{"__v":10,"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z","categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-03-16T19:40:16.515Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Recommend answers the question, \"what next?\"\n\nWhen embedding media, often there is nothing to do after a user pauses or finishes the video. We've helped solve that gap in the online experience for users. Embedly analyzes content from your site to offer intelligent recommendations what to watch next. Here's what they look like this: \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/zcLBmKEiTEuQmsCpETuS_Screenshot%202016-03-16%2014.44.27.png\",\n        \"Screenshot 2016-03-16 14.44.27.png\",\n        \"594\",\n        \"670\",\n        \"#a44644\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nFor the Cards product, these recommendations are built in. You don't have to do anything. For API users, you need to add a few customizations to make this work.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Install\"\n}\n[/block]\nThe first thing you need to do is install [platform.js](doc:platformjs) on your site. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  (function(w, d){\\n   var id='embedly-platform', n = 'script';\\n   if (!d.getElementById(id)){\\n     w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};\\n     var e = d.createElement(n); e.id = id; e.async=1;\\n     e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';\\n     var s = d.getElementsByTagName(n)[0];\\n     s.parentNode.insertBefore(e, s);\\n   }\\n  })(window, document);\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis will wire up a number of conventions to make Embedly work correctly. Next you need to tell platform to enable recommendations.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly(\\\"defaults\\\", {\\n\\trecommend: {\\n  \\tdisplay: \\\"list\\\" // or grid, carousel\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThat's it. Simple, Easy, nothing to it.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Demo\"\n}\n[/block]\nHere's a demo of how the styles will look: \n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fdkuj1qjL%2F%3Fheight%3D800%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Fdkuj1qjL%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"800\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/dkuj1qjL/?height=800&tabs=result,js,html,css,resources\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]","excerpt":"","slug":"recommendations","type":"basic","title":"Recommendations"}
Recommend answers the question, "what next?" When embedding media, often there is nothing to do after a user pauses or finishes the video. We've helped solve that gap in the online experience for users. Embedly analyzes content from your site to offer intelligent recommendations what to watch next. Here's what they look like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/zcLBmKEiTEuQmsCpETuS_Screenshot%202016-03-16%2014.44.27.png", "Screenshot 2016-03-16 14.44.27.png", "594", "670", "#a44644", "" ] } ] } [/block] For the Cards product, these recommendations are built in. You don't have to do anything. For API users, you need to add a few customizations to make this work. [block:api-header] { "type": "basic", "title": "Install" } [/block] The first thing you need to do is install [platform.js](doc:platformjs) on your site. [block:code] { "codes": [ { "code": "<script>\n (function(w, d){\n var id='embedly-platform', n = 'script';\n if (!d.getElementById(id)){\n w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};\n var e = d.createElement(n); e.id = id; e.async=1;\n e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';\n var s = d.getElementsByTagName(n)[0];\n s.parentNode.insertBefore(e, s);\n }\n })(window, document);\n</script>", "language": "javascript" } ] } [/block] This will wire up a number of conventions to make Embedly work correctly. Next you need to tell platform to enable recommendations. [block:code] { "codes": [ { "code": "embedly(\"defaults\", {\n\trecommend: {\n \tdisplay: \"list\" // or grid, carousel\n }\n});", "language": "javascript" } ] } [/block] That's it. Simple, Easy, nothing to it. [block:api-header] { "type": "basic", "title": "Demo" } [/block] Here's a demo of how the styles will look: [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fdkuj1qjL%2F%3Fheight%3D800%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Fdkuj1qjL%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/dkuj1qjL/?height=800&tabs=result,js,html,css,resources", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block]