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

danbo-102710_960_720

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

スポンサーリンク
スポンサーリンク

コメント

  1. うき より:

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

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

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

    • Kiryu Kiryu より:

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

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

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

      色々申し訳ない・・・orz