BACK
|Tech
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>
そのほかがダサいけど、こうなります。今回はFacebookとTwitterだけ。
こちらでも公開中 | |
---|---|
はてなブログ | Luck! |