Vue.jsでソーシャルボタンを出す
ソーシャルボタンをつけたくなった。公開されているコンポーネントで簡単に作れないだろうか。あまり凝らなくて良い。
検索すると以下のようなコンポーネントが出た。
- 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にその話がある。