色々なソーシャルボタンを設置してみる

calendar

reload

最近ソーシャルボタンを設置しているサイトを良く見かけます。
でも、実際に設置する時そのページへたどり着くのが意外とわかりにくく、途中で嫌になって辞めてしまう事が多々ありました。

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

このエントリーをはてなブックマークに追加 このエントリーをはてなブックマークに追加 このエントリーをはてなブックマークに追加

1. 下記URLへアクセス

http://b.hatena.ne.jp/guide/bbutton

2. ボタンを設置するページのURL・タイトルを入力

ブログに設置する場合は、パーマリンクの独自タグがあると思うので、それを入れれば良いかと。
ボタンを設置するページの情報を入力

3. ボタンのタイプを選択

設置する。ボタンのタイプを選択します。僕は気が小さいのでブックマーク数が表示されない「シンプルタイプ」を選んでしまいます。
ボタンのタイプを選択

4. コードを確認し貼付けます。

表示されているコードを確認し、貼付けます。
ブログのテンプレートに貼付ける場合は、パーマリンクの独自タグがあると思うので、それを下図の【URLが入ります】の箇所に入れればOKです。
プレビューを確認。コードを貼付けて完了

Twitter

  

1. 下記URLへアクセス

http://twitter.com/about/resources/tweetbutton

2. ボタンの種類、URL等を選択

他に『ツイート内テキスト』というのもオプションであります。

3. フォローするのにおすすめのユーザー(オプション)

『ユーザーがあなたのWEBサイトからコンテンツを共有し終わった後に、そのユーザーにフォローするように促すためのTwitterアカウントを2つまで紹介することができます。これには、自分のアカウントを含めることもできますし、関連アカウントやパートナーのアカウントを含めることもできます。』とありますが、自分はよくわからないのでスルーしますた。

4. ソースをコピペします

プレビューもでるし、縦横サイズまで表示されます。Twitterさんは親切です。その心意気で、APIも分かりやすくして頂けると幸いです。

facebook

1. 下記URLへアクセス

https://developers.facebook.com/docs/reference/plugins/like/

2. ボタンを設置するページのURLを入力

3. ボタンの表示スタイルを選択


表示するボタンのスタイルを選択します。右側にプレビューが出るので選びやすいですね。

4. その他の設定をします。

送信ボタンの有無など他にも設定できる項目があるので必要な方は設定してください。
でも、基本的に【URL】【ボタンの表示スタイル】を設定していれば良いと思います。

5. 【Get Code】をクリックしてソースをコピペします。


【Get Code】をクリックすると、下図のようにページ内でウィンドウが表示されます。
【IFRAME】をクリックして、ソースをコピペします。(HTML5、XFBMLは自分には用途がよくわかりませんでした。)

google+

 

1. 下記URLへアクセス

http://www.google.com/webmasters/+1/button/

2. ボタンのサイズ、言語を選択する

画面右側にプレビューが出るから便利ですね。
言語設定はデフォルトでは『英語』になっています。適宜変更してください。このブログを見る人はほとんど日本語だと思いますが。。。

3. ソースを指示通りにコピペします

ソーシャルボタンのコードの他に、『head 要素内または body 終了タグの直前に貼り付けてください』というコードもあります。