{"componentChunkName":"component---src-templates-single-post-js","path":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/","webpackCompilationHash":"0bb9bd8306defc5c5a8b","result":{"data":{"post":{"frontmatter":{"meta":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る","description":"今回はSNSのシェアボタンとSNSのログインボタンをサクッと作る方法を書きます。\n実際のSNSでの認証はfirebaseに任せて、providerを変えるだけで様々なSNSに認証させます。\n今回はあくまでUIの作成のみ。","noindex":null,"canonicalLink":null},"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る","template":"SinglePost","subtitle":null,"date":"2019-09-03T11:53:03.125Z","categories":[{"category":"Tech"}]},"html":"

サクッと認証ありのサービスを立ち上げたい。\nそんな想いから、Nuxtで実装をはじめました。

\n

Nuxtで作って何がいいかというと、generateして静的サイトにしてあげれば、AWSのS3にデプロイできる。\nS3へデプロイしてしまえば、ECSやEC2を使うより、格段に安い。

\n

概要

\n

そこで今回はSNSのシェアボタンとSNSのログインボタンをサクッと作る方法を書きます。\n実際のSNSでの認証はfirebaseに任せて、providerを変えるだけで様々なSNSに認証させます。\n今回はあくまでUIの作成のみ。

\n

まずはシェアボタン

\n

こんなサービス見つけました。

\n

すごい！すごい！これを使えば一発でできます。

\n

\"img\"

\n

シェアしたいURLとTextを入力、シェアするSNSを選んで、下部のHTMLとCSSをソースに貼り付けるだけ。それだけでできちゃいました。

\n

つぎにログインボタン

\n

シェアボタンとほとんど同じなんだけどなーと思いつつ、まずは似たようなサービスがないかをググる。⇨見つからない。\n自分で作るのは勘弁。\nよし！シェアボタンをいじいじしちゃおう。

\n

facebookのシェアボタンをサンプルに

\n
<!-- Sharingbutton Facebook -->\n<a\n  class=\"resp-sharing-button__link\"\n  href=\"https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  aria-label=\"Share on Facebook\"\n>\n  <div\n    class=\"resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"resp-sharing-button__icon resp-sharing-button__icon--solid\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path\n          d=\"M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z\"\n        />\n      </svg>\n    </div>\n    Share on Facebook\n  </div>\n</a>\n
\n

ふむふむ。aタグか。扱いづらいのでbuttonに。\n「href、targetいらないな。」ということで消す。\n[Share on Facebook]これは[Login on Facebook]にしておこう。\nあとはクリックイベントを拾ってよしなにやればOK。

\n
<!-- Sharingbutton Facebook -->\n<button\n  class=\"resp-sharing-button__link\"\n  rel=\"noopener\"\n  aria-label=\"Login on Facebook\"\n>\n  <div\n    class=\"resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"resp-sharing-button__icon resp-sharing-button__icon--solid\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path\n          d=\"M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z\"\n        />\n      </svg>\n    </div>\n    Login on Facebook\n  </div>\n</button>\n
\n

そのほかがダサいけど、こうなります。今回はFacebookとTwitterだけ。

\n

\"img\"

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
こちらでも公開中
\"hatena\"
はてなブログ
\"luck!\"
Luck!
\n
\n
\n\n
","id":"d8500bc6-e602-599e-a22f-80810d132de2"},"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":"d8500bc6-e602-599e-a22f-80810d132de2"}}}