ブログにTwitterボタンを付ける方法

2009年5月21日

Webサイトの訪問者を増やすためには、ソーシャル機能の活用は欠かせません。そこで先週末に少しだけこのブログの機能追加をしました。日付欄の右に付いているように、はてなブックマーク、Del.icio.us、そしてTwitterに対応したボタンを追加したのです。

はてなブックマークやDel.icio.usのボタンは、それぞれのWebサイトにボタンの作り方が紹介されています。

はてなブックマークは、このページでブログ別にボタンの追加方法が紹介されています。

Del.icio.usでは、このページにボタンの追加方法が紹介されています。Del.icio.usの場合はどのブログでも共通の方法ですね。

追記:Yahoo!ブックマークとLivedoorクリップのボタン設置については、それぞれ以下のページで紹介されています。

追記ここまで。

ところがTwitterボタンの追加方法はTwitterのサイトには書いてありませんでした。いくつか参考になるサイトはあったのですが、いちばん分かりやすかったのが次のWebサイトの説明です。

Twitterボタンはこういう仕組みだそうです。

http://twitter.com/home?status=XXX

このXXXにURLエンコードした文字列を入れれば、その内容がTwitterのテキストエリアに表示される、というもの。URLエンコード処理が抜けたままTwitterボタンの作成方法を紹介しているWebサイトもありましたが、リンクとして表現するのですからURLエンコードは必要だと思います。

あとは、このブログで使っているMovableTypeのMTタグでこの機能を再現すればいいだけです。以下のように組んでみました。

<a href="http://twitter.com/home?status=
<$MTEntryTitle encode_url="1"$>%20
<$MTEntryLink encode_url="1"$>" 
 target="_blank">
<img title="この記事についてTwitterでつぶやく"
 src="icon_twitter.png">
</a>

それからTwitterボタンの素材を探したのですが、ほかのボタンとサイズが揃ったいいものが見つからなかったで、自分でTwitterのアイコンを少し加工して作ってみました。もしご希望の方がいましたら、ご自由にコピペして使っていただいてかまいません。

Twitterボタンでこのブログのことをつぶやいてみてください!

関連記事 on Publickey

Tags: 編集後記 Twitter

このエントリーをはてなブックマークに追加
ツイート
follow us in feedly





タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本