{"__v":2,"_id":"564e19e3bc4e172d00b9534e","category":{"__v":5,"_id":"564df317826645210097a890","pages":["564e0de843817f17002a5ecc","564e0e5ea910003500a0ca38","564e19e3bc4e172d00b9534e","56f168612a85600e00ea3dcb","56f17465dbe4cc1700a66a7a"],"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-19T16:04:39.832Z","from_sync":false,"order":1,"slug":"javascript","title":"JavaScript"},"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":"2015-11-19T18:50:11.986Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"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:platfromjs)\"\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).","excerpt":"The Embed Button allows you to allow users to embed your site's content with a\nsingle click.","slug":"button","type":"basic","title":"Button"}

Button

The Embed Button allows you to allow users to embed your site's content with a single click.

The Embed Button allows you to allow users to embed your site's content with a single click. Get more impressions from all over the web. To create a Button for your site visit the [Button Generator](http://embed.ly/button). [block:callout] { "type": "warning", "title": "platform.js is required.", "body": "In order to use the button you first need to install ``platform.js``. Please see the install instructions [platform.js](doc:platfromjs)" } [/block] By default ``platform.js`` will create a button for an ``A`` tag with the class ``embedly-button``. For example, this will create a button: [block:code] { "codes": [ { "code": "<a class=\"embedly-button\" href=\"http://embed.ly/code\">Embed</a>", "language": "html" } ] } [/block] If you would like to specify a URL to embed, you can use the ``data-url`` property like so: [block:code] { "codes": [ { "code": "<a class=\"embedly-button\" data-url=\"http://apple.com\"\n\t\thref=\"http://embed.ly/code\">Embed</a>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Customize" } [/block] There are a number of ``data-*`` attributes that you can use to customize the button. They are as follows: [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Value", "h-2": "Description", "0-0": "data-url", "1-0": "data-theme", "2-0": "data-lang", "3-0": "data-target", "0-1": "URL i.e http://embed.ly", "1-1": "\"round\", \"flat\", \"light-round\", \"light-flat\"", "2-1": "\"en\", \"de\", \"tr\", \"es\"", "3-1": "\"window\" (defaults to modal)", "0-2": "Specifies the URL to embed, by default it uses the URL of the page it is placed on", "1-2": "Sets the look of the button. The default it \"round\"", "2-2": "The language of the Embed button, by default we use the browser's locale.", "3-2": "Opens the embed dialog in a new window instead of a modal." }, "cols": 3, "rows": 4 } [/block] [block:api-header] { "type": "basic", "title": "JavaScript" } [/block] With ``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: [block:code] { "codes": [ { "code": " embedly('button', 'embed-this');", "language": "javascript" } ] } [/block] If you would like to create a button from a single element you can do the following: [block:code] { "codes": [ { "code": "var a = document.getElementById('#myCard');\nembedly('button', a, {\n target: 'window'\n});", "language": "javascript" } ] } [/block] If ``platform.js`` has not loaded yet, it will queue actions till we are ready to act on them. [block:api-header] { "type": "basic", "title": "Modal" } [/block] Modal ----- If you would like to manually trigger the Embed Modal you can do this via the following javascript: [block:code] { "codes": [ { "code": "embedly('modal', 'http://embed.ly');", "language": "javascript" } ] } [/block] This will bring up a modal in which the user can choose to copy the Embed code. If you wish to open the dialog in a new window instead, you may use the following code: [block:code] { "codes": [ { "code": "embedly('modal', {\n url: 'http://embed.ly',\n target: 'window'\n});", "language": "javascript" } ] } [/block] For more information on the cards that button and modals generate, check out the [cards](doc:cards).