記事タイトル・URLを一撃でコピーするボタンを実装してみた!テキストウィジェットにコピペするだけなので簡単です。

danbo-102710_960_720

きっかけは鈴木こあらさんの下記のつぶやき。

確かにこれは便利そう! 私、新しく書いた記事を Twitter で報告することがよくあるのですが、毎回タイトルと URL をコピーするのが面倒だと感じていました。

そこで、鈴木さんが言及されている WEB企画LABO さんの記事を参考に、「記事タイトル・URL を1クリックでクリップボードにコピーできるボタン」を実装してみました。今回はその記録です。

スポンサーリンク

動け!タイトル・URLコピーボタン

作ってみたのがこちらです。よかったら押してみてください。

記事のタイトルとURL をコピーする!

ボタンを押した後、どこかで貼り付けをすると、この記事のタイトルと URL がコピーされていることがわかると思います。

WEB企画LABO さんのものほどカッコ良い実装ではありませんが、一応形にはなりました。

IE・Firefox・Chrome で動作確認したところ、問題無いようです。

スマホビューも大事なので、iphone の Safari でもチェックしてみました。一応、タイトルと URL がコピーできます。ただ、CSS の切り替えの際、ややスムースさに欠けた感じがありました。原因は何だろう?今後の課題ですね。

コピペできるかも?実装内容

WordPress のテキストウィジェットに以下の内容を置くことで実現可能です。(自動段落追加はオフ)。

<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','#FFD8D8') // 背景切り替え
      .css('font-weight','bold') // 文字の太さ切り替え
      .css('cursor','default') // カーソル切り替え
      .text('Thank you for copying!'); // テキスト切り替え
  });
});
</script>

WEB企画LABO さんの実装と違うのは、data-clipboard-text をブラウザ側で動的に取得している点です。

そのメリットは、data-clipboard-text の内容を手打ちしたり、data-clipboard-text の出力専用の PHP コードを用意する必要がないので、実装がラクであること。デメリットは、古いブラウザだと動かない可能性があることです。

初期状態の CSS は別途指定。

.copy_btn {
    cursor: pointer; 
    margin: 0 auto; 
    border: 1px solid black; 
    max-width: 400px; 
    height: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    border-radius: 10px; 
    box-shadow:0px 2px #555;
}

参考にされたい方はどうぞコピーしていってください。ただし、何か損害が出たとしても知りませんので、自己責任にてお願いします。

うまくいかないけどどうしたらいい?というご相談は、喜んでお受けします。ここはこうしたらもっと良いよ!というアドバイスは、是非ください。

ちなみに、当ブログの使用テーマは Simplicity 2 です。Simplicity 2 の場合は上記で動きますが、その他のケース(他テーマや、WordPress 以外のブログ)で動かない場合は、上記スクリプトの clipboard.js を読み込んでいる行の直前に次の記述をすると、うまくいくかもしれません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

ブログ with a Christian Wife さんが実装してくださいました!うまく動いているとのことです。

[WordPress] 記事タイトルと URL をコピーするボタン – with a Christian Wife

お試しいただき、ありがとうございます。

まとめ

これで Twitter への記事報告がカンタンになりそうです♪

コメント

  1. うき より:

    コピーさせていただきましたm(_ _)m
    ありがとうございます!

    自分のスマホ(アンドロイド)でタップしてみると,文字はThank you~に変わるのですが,貼り付けができませんでした。
    コピーをしていないようです。

    対処法があればお教えください。

    • Kiryu Kiryu より:

      うきさん、コメントありがとうございました!

      いただいたコメントは残念なことにスパム判定されており、ほぼ1年後の今日まで気が付きませんでした。ごめんなさい。

      アンドロイドだとうまくいかないとのご報告、ありがとうございます。しかし手元にアンドロイドが無いので、試すこともできず、、、

      色々申し訳ない・・・orz