{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Button","type":"basic","slug":"button","excerpt":"The Embed Button allows you to allow users to embed your site's content with a\nsingle click.","body":"The Embed Button allows you to allow users to embed your site's content with a\nsingle click. Get more impressions from all over the web. To create a Button\nfor your site visit the [Button Generator](http://embed.ly/button).\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"platform.js is required.\",\n  \"body\": \"In order to use the button you first need to install ``platform.js``. Please see the install instructions [platform.js](doc:platformjs)\"\n}\n[/block]\nBy default ``platform.js`` will create a button for an ``A`` tag with the class ``embedly-button``. For example, this will create a button:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a class=\\\"embedly-button\\\" href=\\\"http://embed.ly/code\\\">Embed</a>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nIf you would like to specify a URL to embed, you can use the ``data-url`` property like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a class=\\\"embedly-button\\\" data-url=\\\"http://apple.com\\\"\\n\\t\\thref=\\\"http://embed.ly/code\\\">Embed</a>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Customize\"\n}\n[/block]\nThere are a number of ``data-*`` attributes that you can use to customize the button. They are as follows:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Value\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"data-url\",\n    \"1-0\": \"data-theme\",\n    \"2-0\": \"data-lang\",\n    \"3-0\": \"data-target\",\n    \"0-1\": \"URL i.e http://embed.ly\",\n    \"1-1\": \"\\\"round\\\", \\\"flat\\\", \\\"light-round\\\", \\\"light-flat\\\"\",\n    \"2-1\": \"\\\"en\\\", \\\"de\\\", \\\"tr\\\", \\\"es\\\"\",\n    \"3-1\": \"\\\"window\\\" (defaults to modal)\",\n    \"0-2\": \"Specifies the URL to embed, by default it uses the URL of the page it is placed on\",\n    \"1-2\": \"Sets the look of the button. The default it \\\"round\\\"\",\n    \"2-2\": \"The language of the Embed button, by default we use the browser's locale.\",\n    \"3-2\": \"Opens the embed dialog in a new window instead of a modal.\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"JavaScript\"\n}\n[/block]\nWith ``Platform.js`` allows you to control buttons programatically. For instance to use a different class name for the button you can use the the following code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" embedly('button', 'embed-this');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you would like to create a button from a single element you can do the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var a = document.getElementById('#myCard');\\nembedly('button', a, {\\n  target: 'window'\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf ``platform.js`` has not loaded yet, it will queue actions till we are ready to act on them.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Modal\"\n}\n[/block]\nModal\n-----\nIf you would like to manually trigger the Embed Modal you can do this via the\nfollowing javascript:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('modal', 'http://embed.ly');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis will bring up a modal in which the user can choose to copy the Embed code.\nIf you wish to open the dialog in a new window instead, you may use the\nfollowing code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('modal', {\\n  url: 'http://embed.ly',\\n  target: 'window'\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nFor more information on the cards that button and modals generate, check out\nthe [cards](doc:cards).","updates":["62975b733d804202281f6031"],"order":4,"isReference":true,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"564e19e3bc4e172d00b9534e","parentDoc":null,"user":"564de2b4fe07a81700b5c3a4","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z"},"category":{"sync":{"isSync":false,"url":""},"pages":["564e0de843817f17002a5ecc","564e0e5ea910003500a0ca38","564e19e3bc4e172d00b9534e","56f168612a85600e00ea3dcb","56f17465dbe4cc1700a66a7a"],"title":"JavaScript","slug":"javascript","order":2,"from_sync":false,"reference":true,"_id":"564df317826645210097a890","project":"564de2dbfe07a81700b5c3a5","__v":5,"createdAt":"2015-11-19T16:04:39.832Z","version":"564de2dbfe07a81700b5c3a8"},"githubsync":"","project":"564de2dbfe07a81700b5c3a5","__v":4,"createdAt":"2015-11-19T18:50:11.986Z"}