各種SNSボタンをオリジナルなボタンにするコード一覧


Facebookのいいねボタンやツイートボタンをオリジナルの画像にしているページ、たまに見かけますよね。
あれをどうやってやるのか、調べたついでにここでまとめておこうと思います。
これから紹介するコードはアンカータグで出来ていることがほとんどなので、アンカータグの中に画像を埋め込めば画像でボタンを実装出来ますし、テキストを埋め込めばもちろんテキストのボタンを実装出来ます。
自由に使ってみてください。

シェアボタン

[シェアしたいURL]の部分にGoogleのアドレスを入れた場合、以下のような感じになります。

もし以下の画像のようにポップアップで表示したい場合は以下のコードを使用しましょう。

ツイートボタン

[ページのアドレス]、[ツイートさせたいテキスト]、[ページのアドレス]、[Twitterアカウント]の部分を置き換えて使用しましょう。

mixiチェック

mixiチェックを入れる場合はmixiチェックキーを取得しておく必要があります。他のボタンと比べると少し面倒ですね。
mixiチェックキーの取得方法は以下を参考にしてみてください。

5分で完了!mixiチェックを個人サイト・ブログに導入する方法

Google+1ボタン

Google+1ボタンも簡単に設置出来ますね。

はてなブックマークボタン

ボタンはたくさんあるので、他にリクエスト等ありましたらコメントをいただけると助かります。
またわかったことがあれば追記します。

もし役に立った場合は、いいね!やツイートをして友達に教えてあげてもらえると嬉しいです。

更新情報はFacebookページで!

ブログの更新、読んで役立つ他ブログの記事などを更新しています。




関連のある記事


質問があればこちらからどうぞ

コメントを残す

メールアドレスが公開されることはありません。


*