Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2018/10/22 2018/10/22 Web制作

オリジナル画像のツイートボタンを作る方法|パラメータの種類・書き方を知ろう!

もはや”見ない日は無い”というレベルでブログやWebサイトに浸透しているツイートボタンですが、どうせならオリジナルのボタンを作りたい!という人も多いんじゃないでしょうか?

というわけで、今回は自前のボタンを使ってオリジナルのツイートボタンを作る方法を紹介します。

まずはボタンを用意しよう

aタグで囲めるものなら何でもOKですが、画像を使うのが一番ポピュラーですかね。

ついーとする!

今回はこの画像にリンク設定をして、色々とパラメータを加えていきます。

各種パラメータを設定したリンクを設定しよう

とりあえず完成品がこちら。

このように、リンクタグのhrefをちょろっといじるだけでツイートボタンの出来上がりです。簡単!

ついーとする!

パラメータの種類・書き方

指定できるパラメータは以下の4つです。

パラメータ 解説
text ツイートテキスト
url ツイートするURL
via アカウント名(@は書かなくてOK)
hashtags ハッシュタグ(#は書かなくてOK)

この各種パラメータをhttp://twitter.com/share?の後に記述すると、クリックした際にツイートボタンと同じような動作をします。

複数のパラメータを指定する場合

複数のパラメータを指定する場合は「&」で繋げましょう。

href=”http://twitter.com/share?url=◯◯&text=◯◯&via=◯◯&hashtags=◯◯

ちなみにハッシュタグは「,」で区切れば複数指定することも可能です。

パラメータは省略可能

各パラメータは省略可能ですが、シェアボタンとして使うならURLとツイートテキストはほぼ必須となります。viahashtagsはお好みでどうぞ。

スペースや改行を使いたい場合

スペースや改行等の特殊文字を使う場合、URLエンコードが必要になります。

スペース %20
改行 %0a
% %25
& %26

他の特殊文字が使いたい人はここらへんのツールを使えばOK。

WordPressの記事ページで使うには

WordPressなら記事のURLやタイトルを簡単に取得できますが、PHPなんて分からん!という人用に書いておきます。

url=<?php the_permalink(); ?>

記事のURLを指定しています。

text=<?php echo get_the_title(); ?>

記事のタイトルを指定しています。

ツイート画面を別ウィンドウに表示させたい

リンクタグにこのスクリプトを埋め込めばOKです。

onClick=”window.open(encodeURI(decodeURI(this.href)), ‘tweetwindow’, ‘width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1’); return false;”

ついーとする!

本家のツイートボタンに近い動きになるので、特に理由がなければ記述しておいたほうがいいですね。


以上、オリジナル画像を使ったツイートボタンの作り方でした。