{"componentChunkName":"component---src-templates-single-post-js","path":"/posts/twitterのシェアボタンがうまく動かない/","webpackCompilationHash":"0bb9bd8306defc5c5a8b","result":{"data":{"post":{"frontmatter":{"meta":{"title":"Twitterのシェアボタンがうまく動かない","description":"先日Twitterのシェアボタンを作成しました。私のブログはGatubyjsを使っているためReactで書かれています。\nURLエンコードしたURLを使っているのでうまく動くだろうとたかをくくっていました。","noindex":null,"canonicalLink":null},"title":"Twitterのシェアボタンがうまく動かない","template":"SinglePost","subtitle":null,"date":"2019-09-07T04:05:02.597Z","categories":[{"category":"Tech"}]},"html":"<p>先日Twitterのシェアボタンを作成しました。\n私のブログはGatubyjsを使っているためReactで書かれています。</p>\n<p>URLエンコードしたURLを使っているのでうまく動くだろうとたかをくくっていました。</p>\n<pre><code>url={encodeURI('https://green-luck.com'+_get(thisEdge, 'node.fields.slug'))}\n</code></pre>\n<pre><code>              &#x3C;a className=\"resp-sharing-button__link\" href={`https://twitter.com/intent/tweet/?text=%23blog&#x26;url=${url}`} target=\"_blank\" rel=\"noopener\" aria-label=\"\">\n                &#x3C;div className=\"resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small\">&#x3C;div aria-hidden=\"true\" className=\"resp-sharing-button__icon resp-sharing-button__icon--solid\">\n                  &#x3C;svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">&#x3C;path d=\"M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z\"/>&#x3C;/svg>\n                  &#x3C;/div>\n                &#x3C;/div>\n              &#x3C;/a>\n</code></pre>\n<p>ちゃんとエンコードしているので動かないはずはないと。。。</p>\n<p><img src=\"https://ucarecdn.com/1336530a-c9e2-433d-b947-2666fe1250a8/\" alt=\"img\" title=\"jmg\"></p>\n<p>ただし、Twitterに投稿すると非ASCII文字はURLと認識してくれない。。。</p>\n<p>こまった、色々いじった結果、</p>\n<p>hrefのURLを再度エンコードして、共有URLをエンコード×エンコードして文字列として扱ってやるとTwitter上でデコードしてエンコードされたURLを共有することに成功。</p>\n<p>ただし、その場合、textパラメータが思った通りの挙動をしない。\nふむふむ、これはエンコードしてはいけないらしい。</p>\n<p>ここまでわかれば、あとは簡単</p>\n<pre><code>href={encodeURI(`https://twitter.com/intent/tweet/?url=${url}`)+`&#x26;text=%23blog%0a%0a`} \n</code></pre>\n<p>こうしてあげれば、textはエンコードされず、urlパラメータだけダブルエンコードすることで、解決しました。</p>\n<hr>\n<table>\n<thead>\n<tr>\n<th align=\"center\">こちらでも公開中</th>\n<th align=\"center\"></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"center\"><div style=\"width:4em;\"><a href=\"https://green-luck.hatenablog.com/entry/2019/09/05/115206\" target=\"_blank\"><img src=\"https://ucarecdn.com/594b4c50-3aa6-46e4-82f7-a7fff056102c/\" alt=\"hatena\"></a></div>はてなブログ</td>\n<td align=\"center\"><div style=\"width:4em;\"><a href=\"https://green-luck.com/posts/twitter%E3%81%AE%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%81%86%E3%81%BE%E3%81%8F%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84/\" target=\"_blank\"><img src=\"https://ucarecdn.com/6336b0bb-cdc1-48e9-aa7b-3bbc6b8848c2/\" alt=\"luck!\"></a></div>Luck!</td>\n</tr>\n</tbody>\n</table>\n<hr>","id":"cbd9c95c-a098-592c-bfd9-a936996ff335"},"allPosts":{"edges":[{"node":{"id":"11e872df-ccae-573a-bd93-b9c1fafbab72","fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}},"next":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"previous":null},{"node":{"id":"af531f3a-b7d2-5c9e-ad22-e8378a078f07","fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"next":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"previous":{"fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}}},{"node":{"id":"b320c2db-f74d-5213-be91-d01c7f94f8c0","fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"next":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"previous":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}}},{"node":{"id":"cbd9c95c-a098-592c-bfd9-a936996ff335","fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"next":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"previous":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}}},{"node":{"id":"fc5fe850-be92-5297-859f-0839f6b2fbb7","fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"next":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"previous":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}}},{"node":{"id":"d8500bc6-e602-599e-a22f-80810d132de2","fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"next":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"previous":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}}},{"node":{"id":"4c934147-b318-5afd-9241-c1f5d4d75e2f","fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"next":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"previous":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}}},{"node":{"id":"04233bd7-e37d-57cb-b458-50e230b67866","fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"next":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"previous":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}}},{"node":{"id":"ecb65f65-3564-58d5-b2c6-1b712b21783b","fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"next":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"previous":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}}},{"node":{"id":"86bea805-00cf-5633-af27-2bcd764f3d42","fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"next":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"previous":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}}},{"node":{"id":"e3ba1aa1-d2b2-5519-b9b9-00efdcadbd11","fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"next":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"previous":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}}},{"node":{"id":"d31690b3-2c7d-5560-9ab4-a57d83e95b62","fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"previous":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}}},{"node":{"id":"8601b324-6161-51ed-95ce-cb5ffe1ffaa6","fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"previous":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}}},{"node":{"id":"450caa1d-e0c5-5096-95c9-13b3857b90b3","fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}}},{"node":{"id":"1877003c-32b0-5bc4-9cee-8b736797bf64","fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"next":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}}},{"node":{"id":"3777734d-dc86-5124-830b-b123179a6255","fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"next":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}}},{"node":{"id":"b911ff27-f1bd-5dbd-8d55-bc836c9d0864","fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"next":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"previous":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}}},{"node":{"id":"868b483d-2cde-508c-8978-327a3f734203","fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"previous":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}}},{"node":{"id":"f22af0ac-f3e5-5cc1-b552-8c66b6026112","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"previous":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}}},{"node":{"id":"569f7ab2-0c83-5683-81fa-21c69fd5117a","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}}},{"node":{"id":"9abaf084-569e-53db-970a-42f6b1961c26","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}}},{"node":{"id":"2b4b8b24-8bac-5d6e-b8be-be93abf830a3","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}}},{"node":{"id":"c3a9a179-8a04-5767-b325-56f39a3a8173","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"next":null,"previous":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"cbd9c95c-a098-592c-bfd9-a936996ff335"}}}