目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

お好みのソーシャルボタンを設置しよう

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

こんにちは!銀ねこです。
ブログデザインをちょこっと改良しました~。
た だし、スマフォ・タブレット用デザインはまだ変更してません。あしからず。
今日は前言っていたソーシャルボタンの設置方法についてのチップスをご紹介します!

1.シェア数は目安になる!

コンテンツにソーシャルボタンがあると、気軽にシェアできて便利。
記事を読む時もどれだけシェアされてるかでどれだけ人気のコンテンツかが分かりますね!
せっかくブログやホームページがあるのにソーシャルボタンを設置しないなんて勿体無い。
さっそくソーシャルボタン設置シマショウ♪

2.豊富すぎるやろ!ソーシャルボタン

ソーシャルボタンわんさかありますね…。
自分の頭も整理したかったので、種類をまとめてみました〜。

おススメ度名前ボタンの種類 ソースコード
★★★★★Twitter ・ツイート
・フォロー
 >ツィートボタン&フォローボタン
★★★★★FaceBook

・イイね
・送る
・フォロー

 >facebookイイねボタン
 >facebook送るボタン
 >facebookフォローボタン
★★★★★ はてな

・ブックマーク

 >はてなブックマークボタン
★★★★ Google+

・+1

 >Google+1ボタン
★★★★ Line

・送る

 >Lineで送るボタン
★★★ mixi

・いいね
・チェック

 >mixiイイねボタン
 >mixiチェックボタン
delicious

・save

 >saveボタン
tumblr

・フォローボタン
・共有ボタン

 >フォロー&共有ボタン
Gree

・ボタン

 >ボタン

手軽にhtmlに張り付けるだけのソースコードが配布されてます。
SNSの王道Facebook、Twitterは王道なのでぜひ設置したいところ。
読み返してほしいコンテンツが多いなら、「はてなブックマーク」も是非設置したいですね。
tunmlr(タンブラー)、deliciou(デリシャス)とかよくわからないSNSボタンもあるんですね…たぶん使わないな…。

3.まとめて設置

とはいえ、一個一個設置するのは面倒…。
ちなみにFC2ブログでは、FC2ブログ専用ボタン拍手とTwitterとFacebookのボタンは設置可能です。
しかし、私が一番設置いのは「はてなブックマーク」。…ないじゃん。
そこでデフォのボタンは使わず、JQueryでサクッとこんな感じに設置することにしました。



JQueryをダウンロードして、ファイルにアップロードしておきます。

jquery-1.x.x.min.js(現在:jquery-1.10.2.min.js)
今回「Download the compressed, production jQuery 1.10.2」を使いました。
jquery.socialbutton-x.x.x.js(制作者様のサイトよりダウンロード)
※参考にさせていただいたサイトです
@ishiiyoshinori様作 http://itra.jp/jquery_socialbutton_plugin/


<head>内に追記します。
※FC2ブログは.(ドット)を含むファイルはアップロードできないのでjsファイルはリネイム。
多数JQueryを設置している場合は、設置している順番によっては動かなくなる場合があります。
そんな時は前後入れ替えたりして動くように調整してみます。



要素は何でもいいですが今回は空の<div>を設置、CSSでfloatさせて横に並べました。
さらに<div>で入れ子にしてます。



設置するボタンに対するjavascript。 urlとtitleはFC2ブログの変数に代入。
これで投稿記事ごとにシェアできます。
FC2ブログ変数マニュアル


これで、どの記事にもソーシャルボタンが表示されるようになります。


嬉しいのはJQueryのソースを追記・削除でお好みのソーシャルボタンを設置できるところですね。
width()の()数字を変えれば幅も微調整できます。
とりあえず記事のタイトル付近に設置しました。

まとめ

私はGoogle+1はいらないかな~と思ったので削除。
ソーシャルボタンも何でもかんでも設置すればよいってもんではないと私は思ってます。

いつの間にかTweetされてたりびっくりしました。

スポンサーサイト
  1. 2013/10/14(月) 15:29:59|
  2. Web全般
  3. | トラックバック:0
  4. | コメント:0
<<Windows8.1にアップグレードしたのでまとめてみたよ | ホーム | GoogleAnalyticsで検索ワードを解析>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/62-4ef7ea5c
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。