Laravelアプリケーションにvue-social-sharingを使ってシェアボタンを導入します。
以下の様なよくあるボタンですね!
npmでライブラリをインストールしてコードを書いていく。
シェア方法(twitter, facebook, etc...)は<network>
タグで追加/削除できる。<social-sharing>
タグのプロパティとしてtitle
やdescription
、URL
を渡すだけで各シェア先毎の設定をよしなにやってくれる。
<social-sharing url="https://vuejs.org/" title="The Progressive JavaScript Framework" description="Intuitive, Fast and Composable MVVM for building interactive interfaces." quote="Vue is a progressive framework for building user interfaces." hashtags="vuejs,javascript,framework" twitter-user="vuejs" inline-template> <div> <network network="email"> <i class="fa fa-envelope"></i> Email </network> <!-- 中略 --> <network network="whatsapp"> <i class="fa fa-whatsapp"></i> Whatsapp </network> </div> </social-sharing>
特にスタイルを当てない場合、以下の様になる。
スタイルを当てるとこうなる。
ちなみにCSSはこんな感じ。
.share-buttons-componenta { .share-button { cursor: pointer; outline: none; appearance: none; width: 40px; height: 40px; color: white; border-radius: 3px; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1); } .share-button.email { background-color: #952225; } .share-button.facebook { background-color: #3B569D; } .share-button.line { background-color: #45C405; } .share-button.skype { background-color: #24A8EB; } .share-button.twitter { background-color: #1DA1F2; } }
Webエンジニアをやっています
UX/UIデザインからプログラミング、DB設計、SEO、インフラ構築など幅広く対応してます
PHP/PHPUnit/Laravel/Vue/Nuxt/Docker/Terraform
ご連絡はTwitterのDMまで。