ニュースやブログ等の記事についてるシェアボタン、ないと困るくらいに、よく使います。
その記事を読んで思ったことを吐き出しておきたいのと、メモ的な意味でtwitterボタンをよく使います。
自分がよく使ってるので、自分が携わるサイトにもつけたいのですが、どうやってつけたらいいんでしょうね？
このことと関係ない文脈でLINEのビジネスアカウントでキャンペーン的なことをしたときに、よく見かける「お友だち追加」ボタンをどうやって作ればいいんだろうと思ってたらLINEがコードを配布してて。そこで初めて、「もしかして、シェアボタンも、SNS側が配布しているものなのかも？」という発想にいきあたりました。
で、探してみたらそうでした。公式が配布しているものなのでした。
とは言え、シェアボタンって１種類ではなく複数並べることが多いと思うのに、Twitter、Facebook等のそれぞれの運営元が配信しているものをそのまま使うと、アイコンにばらつきが出ちゃいます。デザイン的な問題。
それから、別タブで開かせるのか、ページを移動させずに小窓で開かせるのか、といったところも、それぞれのコード次第です。
そんなこんなで、コード自体を手作りされてる方たちもいて、検索すると出てきます。「SNS シェアボタン」とかで。
というのがシェアボタン設置に関する超ざっくりした概要です。
結局何かしら手を入れることになるかと思いますがとりあえず公式が配布しているページをメモしておきます。（画面は2020/6/25現在の画面です。Chromeで日本語翻訳した状態です）
少し下にスクロールして
このオプションのなかで一番右の「twitter button」を選びます
twitter buttonの選択肢が出てくるので、そのなかの共有ボタンを選びます
共有ボタンを設置するためのコードが出てくるので、「コードをコピー」して、自分のhtmlファイル内にそのまま貼り付けます。
ちなみにコードはこうでした
classはとっちゃって、「Tweet」ってなってるところに今回使いたい<img>を入れれば、いい感じです。
でもこれだと別タブで開く。以前作ってもらったコードを載せときます。これだと小窓で開いてくれます。
さらにカスタマイズオプションを設定することもできます
カスタマイズオプションの項目はこんな感じです。
ハッシュタグや、アカウントがあるならアカウントを、いっしょにツイートしてもらうように仕込んでおくことができます。
カスタマイズオプション設定して「更新」を押すと、更新されたスクリプトが表示されます。
ちなみにコードはこれでした
https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP#
正直いって、まだやってませんが、リンクだけ載せておきます。これからやる。
https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin
このコードでこうなるんすね。
どの部分に今回使いたい<img>を入れればいいのかわからないコードです。苦戦しそうな予感。
URLコピーボタン
どのアプリも関係なくてとりあえずURLとタイトルがコピーできるボタン、あれも私、たまに使います。URLだけじゃなくてタイトルもコピーされるっていうのが、便利なんですよね。
あれはさすがにどこも配布してないだろうから自分で書かなきゃいけませんね。
検索するとclipboard.js という Javascriptライブラリを使う方法ばかり出てきます。できるだけシンプルに手作りで書きたいから、ライブラリとか入れたくないんですよねー・・・。
分かりやすい自作について書かれてるところを見つけたらこちらにURLを載せるようにします。
jQueryで自作されてる例
概要）
BtoB拡散の新しいカタチ。「タイトル＆URL一括コピー」ボタンを実験してみた。｜MarTechLab（マーテックラボ）
実際のコード）
