BACK
|Tech

SNSのシェアボタンとSNSのログインボタンをサクッと作る

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

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

概要

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

まずはシェアボタン

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

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

img

シェアしたい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だけ。

img

こちらでも公開中
hatena
はてなブログ
luck!
Luck!