オリジナルのツイートボタンを作る方法

ウェブ制作技術

おはようございます、ヒグチです。

新潟市は、いよいよ雪が降りそうな気配です。
雪が積もったら、楽しいことがもりだくさんですね。
雪だるま、かまくらですする熱燗、好きな子に強くぶつけてしまう雪合戦、つらら落とし、かんじきを履いてしみわたりツアーなどなど。

今から楽しみですね。

今回は、ブログ、オウンドメディアなどのウェブサービスで使われることが多そうな制作TIPSを紹介します。
オリジナル画像でツイートボタンを作る方法です。

ツイートボタン

オリジナル画像でツイートボタンを作る

通常、サイト内にツイートボタンを設置する場合、公式サイトで設定し、コードをコピペして自分のサイトに貼り付けます。
これが公式のやり方です。

だけど、オリジナルデザインでツイートボタンを作りたいときもありますね。
とくに失恋した直後とかは、そういう気分になることが多いと思います。

そういう場合は、下記の手順で作ります。

1:テキストなり画像なりで、オリジナルのボタンを作る

2:上記に、ツイートのリンクを設定する

これだけです。

「ツイートのリンク」にはいろいろなパラメータが含まれるので、これを紹介します。

ツイートリンク書き方

まずはHTMLの完成品を紹介します。

ちょっと見づらいですが、解析するとこんな感じになります。

  • https://twitter.com/intent/tweet:ツイートボタンのURL
  • 「?」以降にパラメータをつなげる
  • パラメータは「&」でつなげる
  • 上記例で出てきたパラメータ「text」と「url」

「?」以降の構造を簡略化すると、このようになっています。

また、textなどで日本語が入っている場合、UTF-8にエンコードしてあげたほうがベターです。
このサイトなどでできます。

ツイートリンクのパラメータ

「text」や「url」以外にも、設定できるパラメータがいくつかありますので、紹介します。

  • text:ツイートさせたいテキスト
  • url:ツイートさせたいURL
  • via:ツイート内に含むユーザ名
  • hashtags:ハッシュタグ

コピペして適宜変更して使っていただけるコードを書いておきます。


いかがでしたでしょうか。
ツイートボタンだけでなく、facebookやGoogle+、はてブなどのボタンも、いまのところオリジナルデザインに置き換えることができます。

うまくデザインして、たくさんシェアしてもらいたいものですね。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。