ブログのTwitterボタンを自作してみた


「デフォルトのシェアボタンじゃ物足りない」・「もっと凝ったツイートをシェアしてもらいたい」、と思ったことはありませんか?ありますよね?いや、あるんです。

と言うわけで今回作っちゃいました、WordPressブログ用のTwitterボタン。

割と用途は多いんじゃないかと思うので是非御一読くださいな。

今回作成するTwitterボタンの特徴

  • WordPressのカスタムHTMLのみで完結
  • PC・スマホで使用可能
  • スマホの場合はtwitterアプリに自動で遷移
  • Twitter APIの認証・連携が不要


HTMLのサンプル

では早速サンプルのHTMLを見ていきましょう。

これをWordPressのカスタムHTML内に記載すれば、簡単にTwitterボタンを作成できます。

コピペすれば大体は使えますが、軽くポイントだけ解説しておきます。

<form></form>と<input>のoriginal_referer, ref_src, tw_pは必須
 
text, hashtags, urlは省略可能
 
original_refererのvalueには、このHTMLを書くページのURLを設定
 
textの部分にはツイートの本文を設定
※nameがtextであればtextarea以外でも可
 
hashtagsにはツイートに付与したいハッシュタグを設定
※複数指定時は、value=”tag1,tag2″のようにカンマ区切りで指定
 
urlの部分はシェアしたいURLを設定
 


特に難しいところはないので、本文をいかに工夫するかが腕の見せどころですね。


使用例

先ほどのHTMLを実際に使用したサンプルも載せておきます。


終わりに

HTMLだけで簡単に作れるのでちょっとしたシェアボタンの作成にちょうどいいですよね。

今回はデザイン面については特にカスタマイズしていませんが、ボタンや各種入力フォームは普通にカスタマイズ可能です。

記事を訪れた人が思わず押したくなるようなボタンを作成し記事のシェア数アップを目指したいです。

Leave a Reply

Your email address will not be published. Required fields are marked *