Vue.jsでソーシャルボタン

IT記事

ソーシャルボタンをつけたくなった。公開されているコンポーネントで簡単に作れないだろうか。あまり凝らなくて良い。

検索すると以下のようなコンポーネントが出た。

  • vue-social-sharing : star数が多そう。icon等見た目は別に用意する必要がある。
  • vue-goodshare : goodshare.jsというのを使うらしい。このコンポーネント単体だけ入れてみたけどiconが表示されなかった。
  • vuesocial : iconは用意されていて、それをダウンロードして配置する。
  • vue-share-buttons : iconはSimple Iconsというのを使う。

一番上の、vue-social-sharingを使ってみる。ソーシャルボタンを塊で並べるのに適しているようだ。

ボタンの見た目は自由にできる、けど今の自分の状況的に用意するのが面倒。(buttonってブラウザ差異も含めたらCSSフレームワークにあるのしか使えないし。それ気に入らなかったら、また別に見た目探してこなきゃならないし、cssコピペとか面倒だし)

なので、今回はFont Awesomeを使っていたのでiconにはそれを使い、カラーコードはググってきて貼った。そこまで。

  <social-sharing
    :url="aaa"
    :title="aaa"
    :description="aaa"
    :quote="aaa"
    :hashtags="aaa"
    network-tag="span"
    inline-template
  >
    <div>
      <network network="facebook">
        <i class="fab fa-facebook" style="font-size:2em;cursor:pointer;color:#3C5A99"></i>
      </network>
      <network network="twitter">
        <i class="fab fa-twitter" style="font-size:2em;cursor:pointer;color:#1DA1F2"></i>
      </network>
      <network network="reddit">
        <i class="fab fa-reddit" style="font-size:2em;cursor:pointer;color:#FF4301"></i>
      </network>
      <network network="line">
        <i class="fab fa-line" style="font-size:2em;cursor:pointer;color:#00B900"></i>
      </network>
      <network network="linkedin">
        <i class="fab fa-linkedin" style="font-size:2em;cursor:pointer;color:#2867B2"></i>
      </network>
    </div>
  </social-sharing>

とりあえず、今はこれで……。

気づいたのは、social-sharingタグの中だと、変数を {{aaa}} というふうにレンダリングはできるが、<div :class="aaa"> のように渡すことはできない。issueにその話がある。