29:null 2a:["$","title",null,{"children":"Share on Twitter Button | Pierre Ripoll | Observable"}] 2f:T744,style = html``30:[] 2d:{"id":"cd832dfa6c7938a9","slug":"share-on-twitter-button","title":"Share on Twitter Button","thumbnail":"a35507ccf83adc54674821e99d1db688594ba76126c84ed56b76a9999554ed92","access_level":"public","create_time":"$D2020-04-07T13:25:29.446Z","update_time":"$D2020-04-09T22:55:51.658Z","view_time":null,"first_public_time":"$D2020-04-07T17:11:30.205Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":"starter_2024"},"version":451,"publish_version":451,"role":null,"authored":false,"authors":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null}],"members":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Share on Twitter Button","cells":[{"id":0,"value":"md`# Share on Twitter Button`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md` Inspired by [@mbostock/tweet](https://observablehq.com/@mbostock/tweet).\n\nThis notebook provides a tiny convenience function for sharing a tweet containing a specified URL or notebook's URL default using plain HTML. To use it in your notebook, first import it:\n\n\\`\\`\\`js\nimport {shareTweet} from \"@pierreleripoll/share-on-twitter-button\"\n\\`\\`\\`\n\nThen define a cell that calls *shareTweet*, passing in the URL to share (notebook's url default), with or without options.\n\nNext I would like to add a media/upload option using [this API](https://developer.twitter.com/en/docs/media/upload-media/overview).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md` Default :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"shareTweet()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md` Example with specific URL + options :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"shareTweet(document.baseURI, {\n buttonText: \"Share this notebook on Twitter !\",\n text: \"Great @ObservableHQ notebook : create a share-on-twitter button 😉\",\n hashtags: \"observable,demo\",\n via: \"pierreripoll\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`## Link`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`If you prefer you can also create a link instead of a button with \n\\`\\`\\`js\nimport {shareTweetLink} from \"@pierreleripoll/share-on-twitter-button\"\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"link = shareTweetLink(document.baseURI, {\n text: \"OMG ! This @ObservableHQ notebook changed my life 🤩\",\n hashtags: \"link,isthisreallife\",\n via: \"pierreripoll\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`You can then add it inside Markdown : [for example here](${link}), cool right ? It's simpler than a full ${shareTweet()} and incorporate better in a paragraph. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"svg_string = ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function shareTweet(url = document.baseURI, options = {}) {\n return html`\n ${style}\n \n \n \n ${options.buttonText || \"Tweet\"}\n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"function shareTweetLink(url = document.baseURI, options = {}) {\n let link = new URL(\"https://twitter.com/intent/tweet\");\n let params = link.searchParams;\n\n params.set(\"original_referer\", document.baseURI);\n params.set('url', url);\n for (let o in options) {\n if (url_options.includes(o)) params.set(o, options[o]);\n else if (!button_options.includes(o))\n throw new Error(\n `${o} is not a valid option for the share tweet button !`\n );\n }\n\n return link.href;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"url_options = ['text', 'hashtags', 'via', 'related']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"button_options = ['buttonText', 'blockNewTab']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"