SNSのシェアボタンとSNSのログインボタンをサクッと作る
サクッと認証ありのサービスを立ち上げたい。 そんな想いから、Nuxtで実装をはじめました。
Nuxtで作って何がいいかというと、generateして静的サイトにしてあげれば、AWSのS3にデプロイできる。 S3へデプロイしてしまえば、ECSやEC2を使うより、格段に安い。
概要
そこで今回はSNSのシェアボタンとSNSのログインボタンをサクッと作る方法を書きます。 実際のSNSでの認証はfirebaseに任せて、providerを変えるだけで様々なSNSに認証させます。 今回はあくまでUIの作成のみ。
まずはシェアボタン
こんなサービス見つけました。
すごい!すごい!これを使えば一発でできます。
シェアしたいURLとTextを入力、シェアするSNSを選んで、下部のHTMLとCSSをソースに貼り付けるだけ。それだけでできちゃいました。
つぎにログインボタン
シェアボタンとほとんど同じなんだけどなーと思いつつ、まずは似たようなサービスがないかをググる。⇨見つからない。 自分で作るのは勘弁。 よし!シェアボタンをいじいじしちゃおう。
facebookのシェアボタンをサンプルに
<!-- Sharingbutton Facebook --> <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="Share on Facebook" > <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large" > <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path 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" /> </svg> </div> Share on Facebook </div> </a>
ふむふむ。aタグか。扱いづらいのでbuttonに。 「href、targetいらないな。」ということで消す。 [Share on Facebook]これは[Login on Facebook]にしておこう。 あとはクリックイベントを拾ってよしなにやればOK。
<!-- Sharingbutton Facebook --> <button class="resp-sharing-button__link" rel="noopener" aria-label="Login on Facebook" > <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large" > <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path 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" /> </svg> </div> Login on Facebook </div> </button>