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

Programming プログラミング
この記事は約2分で読めます。

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

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

…揃えたい。。

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

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

スポンサーリンク

画像の準備

まずは画像を準備する。

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

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

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

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

リンクの設定

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

<!-- Twitterのツイートボタン -->
<a href="http://twitter.com/share?url=&#91;ホームページ・ブログのURL&#93;&amp;text=&#91;任意のテキスト&#93;">
Twitterでつぶやく
</a>

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

<!-- Facebookのシェアボタン -->
<a href="http://www.facebook.com/sharer.php?u=&#91;ホームページ・ブログのURL&#93;&amp;t=&#91;ホームページ・ブログのタイトル&#93;" rel="nofollow">
Facebookでシェア
</a>

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

<!-- RSS -->
<a title="RSSリーダーで購読する" href="https://itlogs.net/feed/" rel="alternate" type="application/rss+xml">
<img alt="RSSリーダーで購読する" src="https://itlogs.net/wp-content/uploads/RSS.png">
</a>

<!-- Twitter -->
<a title="Twitterでつぶやく" href="http://twitter.com/share?url=https://itlogs.net/&amp;text=俺の開発研究所">
<img alt="Twitterでつぶやく" src="https://itlogs.net/wp-content/uploads/Twitter.png">
</a>

<!-- Facebook -->
<a title="facebookでシェアする" href="http://www.facebook.com/sharer.php?u=https://itlogs.net/&amp;t=俺の開発研究所" rel="nofollow">
<img alt="facebookでシェアする" src="https://itlogs.net/wp-content/uploads/Facebook.png">
</a>

これで完成!

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

スポンサーリンク
スポンサーリンク
プログラミング
えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました