「記事のタイトルとURLをコピーする！」というだけのボタン。
なにこれ？と思いきや、これが意外と便利そうなんですよ！
ボタンを設置したきっかけ
こんな記事を見かけたのがきっかけ。【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした！ - ウェブ企画ラボ
この記事によれば、「SNSでシェアするときにサイトのソーシャルボタンはあんまり使わない」人が多いとのこと。
ちなみにソーシャルボタンっていうのはこういうやつ↓
「ではどのようにシェアするの？」と聞いたところ、
URLをコピー
↓
アプリを起動
↓
貼り付け
とするそう。でもよく考えたらそのほうがどんなアプリでも共有できるし楽ですよね。
というアンケートの結果もあったとか。
たしかに納得かも？こんなめんどくさいことあるある
たしかにTwitterとかLINEとかみたいなSNSでシェアしたいとき、URLをコピーして貼り付ける方が早いときもけっこうありますよね。
スマホでネット見てて気になったサイトをシェアしたいとき。
Twitterボタンを押したら、こんな画面になったことありませんか？
これすごいめんどくさいですよね。笑
「こうなるくらいなら最初からソーシャルボタンを使わない」っていう考えもわからんではない。むしろ納得しました。
ネットを見る人のほとんどがスマホで見ている事実
スマホの普及率を考えたら当たり前っちゃ当たり前なんですけど、僕のブログもスマホで見てる人がかなり多いんですよね。
こんな統計が出てきました。
１番多いのがWindowsのパソコンからのアクセス。
２番目に多いのがiPhoneから。
そして４番目にAndroid。
iPhoneとAndroidのアクセス数を合わせると、１番多いWindowsからのアクセス数を上回ります。すごい。
そしてスマホで見てるときほど気になった情報があればSNSでシェアしたいものですよね。そうなると、ソーシャルボタンよりもシェアしやすいボタンがあったりしたらすごく便利かも？
「記事タイトルとURLをコピーする」だけのボタンの作り方
ここでこのボタンの登場ですよ。
こんなのを作ってみました。
記事のタイトルとURL をコピーする！
これをポチッと押すだけで文字通り「記事のタイトルとURLをコピーする」ことができます。
作り方はこんな感じ。
html
<div class="copy_btn" data-clipboard-text="">
記事のタイトルとURL をコピーする！
</div>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copy_btn'); //clipboard.min.jsが動作する要素をクラス名で指定
//クリックしたときの挙動
jQuery(function(){
var title = jQuery('title').text(); //タイトル取得
var url = location.href; //URL取得
jQuery('.copy_btn').click(function(){
jQuery(this)
.attr('data-clipboard-text', title + ' ' + url) // コピー内容生成
.css('background-color','#9a9a9a') // 背景切り替え
.css('color','#ffffff') // 文字色切り替え
.css('font-weight','bold') // 文字の太さ切り替え
.css('cursor','default') // カーソル切り替え
.text('記事タイトルとURLをコピーしました'); // テキスト切り替え
});
});
</script>
CSS
.copy_btn {
cursor: pointer;
margin: 0 auto;
padding: 1em;
border: 1px solid black;
max-width: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 10px;
box-shadow:0px 2px #555;
}
キリュログさんの記事を参考にさせていただきました。ありがとうございます！
記事タイトル・URLを一撃でコピーするボタンを実装してみた！テキストウィジェットにコピペするだけなので簡単です。
これで先ほどのボタンがサクッと設置できちゃいます。
おわりに
実際に便利かどうか、シェアしやすくなってたくさん拡散してもらえるかはまだ未知数ですが、やってみないと何事もわからないですもんね！ものは試しってことで。
しばらくこのまま運用して見守ってみたいと思います。
今回参照させていただいた記事：
【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした！ - ウェブ企画ラボ
記事タイトル・URLを一撃でコピーするボタンを実装してみた！テキストウィジェットにコピペするだけなので簡単です。
追記
iPhoneでSafariで閲覧してるとき、ボタンを押してもクリップボードにコピーできませんでした。「あれ？」と思ったので調べてみたら、このJavaScriptどうやらSafariにだけ対応してないとか。えぇ〜Safariユーザーかなり多いのに困るなぁ。。笑
参照リンク：
クリップボードにコピーをjavascriptで実現する【clipboard.js】 | MONOCHROME DESIGN(モノクロームデザイン) : フリーランスWEB/UIデザイナー
他にいい方法がないか、調査しておきますので何かあればまた記事で報告いたします！笑
コメント