投稿数・シェア数が表示されるSNSのフラットなデザインのボタンが作れる 『GETSHARES』

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

普通のSNSの共有ボタンじゃ満足できない
ウェブサイトにマッチしたおしゃれなフラットデザインのSNSのボタンを設置したい そんな時にはこれがいいかもしれません

 

GETSHARES

http://getshar.es/

WS002525

大量に並べられているものがこのサイトで作れるシェアボタンです、デザインが統一されているので複数設置した時にボタンによるバラつきがなくなるので、デザイン性もUP

 

GETSHARESでシェアボタンを作る

画面右上の Create your own からコードを作成します

WS002526

 

ウィザードに従って作成を開始
まずは、作りたいシェアボタンを選択します、29種のSNSボタンと12のコインから選べます

WS002527

 

次にSettingをクリックして、詳細の設定をします
表示する文字、カウンターのデザイン、シェアするURL、シェアするときのテキストを入力します

WS002528

  • Button Text = 表示するテキスト アイコンの幅を統一したいのなら 無記入にすると綺麗に揃います
  • Counter Positon = カウンターの表示スタイルを決めます、選んだものは右側のPreviewで確認できます
  • Url = シェアしたいURLを入力
  • Status = シェアするときに表示されるデフォルトのメッセージを入れます

 

 

Generate でコードを生成
表示されたコードを少し付け加えて、ウェブサイトに貼り付けます

WS002529

 

取得したコード + aタグ追加とjQueryセレクタで指定

<a class="twitter" href="#"></a>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.getshar.es/lib/0.8.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://cdn.getshar.es/lib/0.8.0.min.css"/>
<script src="js/0.8.0.min.js"></script>
<script type="text/javascript">
  new GetShare({
    root: jQuery(".twitter"),
    network: "twitter",
    share: {
      url: "http://9-bb.com/",
      message: "tekisuto"
    }
  });
</script>

ボタンはaタグで表示させます
今回のケースではtwitterというクラス名をつけています

そのクラス名を11行目の root: jQuery(“.twitter”) として指定しています

これをウェブサイトに貼り付ければOKです

 

動作にはjQueryが必要で、さらにこれ専用のjsファイル、cssファイルが読み込まれています(これらは取得したコードに含まれています)
jsとcssはダウンロードして、自分のサーバーにアップして呼び出すことも出来ます

あとコードを毎回取得せずとも、new Getshare の所をコピってnetworkのところをSNS名に差し替えてjQueryのセレクタでaタグを指定すればOK

 

ちょうどウチのウェブサイトのデザインに合うけど はてブが対応していないのが惜しい!
他のSNSのボタンをこれに入れ替えてもはてブだけが違ったデザインになるので、逆にバラバラなデザインってので統一する方が良いかな

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)