俺の開発研究所

Ruby on Rails、Linux、Windowsを中心にIT技術系の備忘録とか。よく忘れるので。

*

Facebookのシェアボタン、Twitterのツイートボタンをカスタマイズ

      2014/08/31

ホームページやブログなどは、Facebookの「いいね」ボタン・「シェア」ボタンやTwitterの「ツイート」ボタンなどのソーシャルボタンは必須。

でも、FacebookやTwitterなどそれぞれで、大きさやタグなどが異なる。

…揃えたい。。

ということで、今回は自前の画像を使用して揃えてみます。

作成するのは、「Twitter」、「Facebook」の2つと、ついでに「RSS」も。

スポンサード リンク

画像の準備

まずは画像を準備する。

元ネタは「CSS Social Buttons」というサイトより。

このまま使用してもいいんだが、ブラウザによって見え方が多少異なるので、画像を自分で作成した。

RSSリーダーで購読するTwitterでつぶやくfacebookでシェアする

こちらはお好きに使ってください。

リンクの設定

Twitterの場合、以下のようにして、ツイート入力画面を別ウィンドウで開く。

Facebookの場合、以下のようにして、リンクシェア画面を別ウィンドウで開く。

実際のソースは以下のようにする。

これで完成!

RSSリーダーで購読するTwitterでつぶやくfacebookでシェアする

なお、TwitterとFacebookの公式サイトに記載されている各ボタンの説明は以下です。

また、通常のボタンは以下の公式サイトで作成できます。

ちなみに、これだと「いいね」数や「ツイート」数が分からないんだなー。。

標準のボタンを使用するか、こちらを使うかはお好みで。

公式サイト

Facebook公式サイト(Like Button:いいね!ボタン)

Facebook公式サイト(Share Dialog:シェアボタン)

Twitter公式サイト(ツイートボタン)

参考サイト

新ツイートボタンの設置&カスタマイズ方法まとめ – Foobar Box

HTMLとCSSだけで作るFacebookの「いいね!(like)」ボタン : web memo.Ver.2

Facebookのshare(シェア)ボタンをサイトやブログに設置する方法 : web memo.Ver.2

 - Facebook, HTML, Twitter