takumart.net link

takumart.net - Takuma saitou Art works |  Art Works  |  Photo Works  |  Profile  |  Download  |  Mail  |  Blog  |  Link  |  Sitemap  

2011年7月4日月曜日

「四角いソーシャルブックマークボタンを設置するまとめ」

ソーシャルブックマークボタン増えましたよね。
四角い大きいボタン増えましたよね。
Takumaです。
 

【四角】
�� 正方形・長方形などのように、四隅にかどのある形。四辺形。四角形。また、そのようなさま。「―な(の)折り紙」「真(ま)―」
�� 角ばっていること。また、そのようなさま。「―な顔」
�� 人の態度・行動などが、型にはまって堅苦しいこと。また、そのようなさま。「―にかしこまる」(by Yahoo!辞書)

 



さてさて、昨今 ソーシャルブックマークボタンの設置は当たり前になり、ブログでは記事の人気の指標として大きく扱われるまでになりました。

そうですよね。そんな時代です。

と言う訳で、久しぶりにブログカスタマイズする時間が取れたので・・・
一気に増やしてみました。

「四角いソーシャルブックマークボタンを設置するまとめ」


■twitterボタン■■■■■■■■■■■■■■■■■

Twitter / ツイートボタン

厳密に言うと、ツイートボタンだそうです。以前より設置していたのは、
「垂直方向にカウント数を表示 」のボタン。

今回、他のボタンも設置する際に気付いたこと。ツイートボタンだけ横幅広すぎ。
コレの原因は、日本語用ボタンだからです。

------------------------------
ジェネレーターで生成されるうち、
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="takumart" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

のソースのうち、「data-lang="ja"」を外すことで、デフォルトの英語verに。
そうすると、他のボタンとおおむね近い横幅となります。
------------------------------
と言う形で設置したのが今のボタンです。


■Google+1(プラスワン)■■■■■■■■■■■■

プラスワン ボタン

ここで生成できる「大(60px)」を選択。
プラスワンボタンの場合、2種類のソース設置が必要で

------------------------------

(1)head 要素内または body 終了タグの直前に貼り付け
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
----------
(2)+1 ボタンを表示する箇所に貼り付け
<g:plusone size="tall"></g:plusone>

------------------------------

ちなみに、詳しい仕様やパラメーターについてはこちらに書いてあるようです。

▼ピックアップ▼
+1 ボタンをサイトに追加 - +1 button API - Google Code


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

使いやすくなりました! はてなブックマークボタン
「バーティカル 」を選択。

ジェネレーターで生成したコードのURL部分とブックマークタイトル部分をwordpress仕様に変更。
------------------------------
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
------------------------------


■facebookボタン■■■■■■■■■■■■■■■■■

Like Button - Facebook開発者

ここでハードルなのが、開発者登録。
以前していたものの、携帯メアドでの認証が追加されていました。メンドイ。

さて、今回もリンク箇所をwordpress対応のコードに変更。
------------------------------
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=178761282184194&amp;xfbml=1"></script><fb:like href="<?php the_permalink() ?>" send="false" layout="box_count" width="50" show_faces="true" font="arial"></fb:like>
------------------------------
実は、「イイネ!」で表示される内容。
サイト側のメタタグで指定ができるのですね。
特に、表示される画像の指定はしたほうがいいですよね。
(※ページ上の記事と関係ない画像拾ってきますし・・・ボタンとかね。)

▼参考:ピックアップ▼
Facebookでいいね!ボタンが押されたときにニュースフィードに表示されるサムネイル画像を指定、変更する方法-がんばるデザイナ tuts!

■■■■■■■■■■■■■■■■■■■■■■■■■

facebookボタンの読み込みが遅いな・・・


■P.S:今日の気になったサイト■■■■■■■■■■■

▼ピックアップサイト▼
RaNa design associates, inc.

●んで、一言
おしゃれカフェといえば、ラテアート。
バーチャルでラテアートつくって、ツイートやfacebookに投稿できるコンテンツ。

以外と、作る工程がしっかり作られています。
ここまで作るならFlashだよなと思わせるほど、演出も細かくて、気合いが入った作りになっています。
んで、私がつくったラテアート。
LATTE HEART MESSAGE -想いで描く、じんわりラテアート-

■■■■■■■■■■■■■■■■■■■■■■■■■