stryhのchangelog

[WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載！

15件
約 22 分
[WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載！

どうも@saita_ryouheiです。

タイトルにもある通りソーシャルボタンを設置しました。
設置したのはちょっと前なので既に当ブログをご覧になられている方は気付いているかと思います。

以前から設置はしていたのですが、それはプラグイン、外部サービスのJSファイルを読込み設置していました。

それでも良かったのですが、ソーシャルボタンの表示が小さいアイコンになってしまい、それとデザインに自由がきかなかったのであまり納得はしてませんでした。

そんな理由もあり納得のいくボタンを設置したいと思いかなり経つのですが、今回設置しました。
その備忘録でごあす。

表示箇所

PC

PCの場合は以下、2箇所です。

PCの表示箇所 - WordPressに自前でソーシャルボタンを設置

  • エントリーページの最初
  • 左サイド（少しスクロールするとアニメーションで表示されます）

iPhone

iPhoneの場合は以下に表示してます。

iPhoneの表示箇所 - WordPressに自前でソーシャルボタンを設置

  • エントリーの最初と最後

iPhoneの場合、画面が小さい事もありますし、たくさん表示して本来見て欲しいエントリー内容に目がいかないのは良くないかな〜と思ったので表示するボタンの数を意図的に少なくしています。

ソースコードを公開

デフォルトでソースコードの表示は折り畳んであります。
広げてみたい場合はリンク表示されている所をクリックし広げて見て下さい。

それとCSSについては当ブログのデザインにあわせて定義しています。
もしお使いになる場合はお使いになるサイト、ブログにあわせて修正をしお使いください。

PC

HTML – 左サイド

PC版のHTML – 左サイドは以下です。
ソーシャルボタンと一緒にページ内TOPに移動するリンクも一緒に設置しています。
このリンクは三角形の形していますが、画像を使わず、CSSのみで表示しています。

<div id="social_wrap">
   <ul id="social_box" style="display:none;">
        <li><a href="#top"><div id="social_pageTop"></div></a></li>
        <li><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
        <li style="margin: 1px 0px 7px 0px;"><div id=fb-root></div><script src='http://connect.facebook.net/en_US/all.js'></script><p><a onclick='postToFeed(); return false;'><img src="//stryh.com/wp-content/uploads/2013/05/shareButton.png" width=71px height=23px style="cursor:pointer;"/></a></p><p id=msg></p><script>FB.init({appId:"247608918715189",status:true,cookie:true});function postToFeed(){var obj={method:'feed',link:'<?php the_permalink(); ?>',picture:'<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, 'thumbnail'); echo $image_url[0]; ?>',name:'<?php the_title(); ?>',caption:'',description:'<?php echo get_post_meta($post->ID,'description',true); ?>'};function callback(response){document.getElementById('msg').innerHTML="Post ID: "+response['post_id']}FB.ui(obj,callback)}</script></li>
        <li><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=box_count&show_faces=false&width=90&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:62px;" allowTransparency="true"></iframe></li>
        <li><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="vertical-balloon" 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></li>
        <li><g:plusone size="tall" href="<?php the_permalink() ?>"></g:plusone><script type="text/javascript">(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po,s);})();</script></li>
        <li style="margin: 0px 0px 7px 0px;"><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></li>
        <li><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
    </ul>
    <div id="social_main"></div>
    <div id="social_side"></div>
</div>

CSS – 左サイド

次にCSSです。

#social_wrap{
  width:960px;
  margin:10px auto;
}
#social_box:hover {
/*  background-color:#E48E00;*/
  opacity: 1;
}
#social_pageTop {
    border-bottom: 35px solid #2F2F2F;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    height: 0;
    margin: 0 0 10px 5px;
    width: 0;
}
#social_box{
  background:none repeat scroll 0 0 #FFFFFF;
  width:60px;
  padding:10px 30px 10px 10px ;
  margin-left:-105px;
  text-align:left;
  position:fixed;
  bottom:100px;
  list-style-type:none;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 10px 0px 0px 10px;
  opacity: 0.7;
}

#social_main{
  width:660px;
  float:left;
}

#social_side{
  width:300px;
  float:left;
}

HTML – エントリー毎

次はエントリー毎のHTMLです。

<div style="height:69px;float: left;">
  <div id="socialButton-comm">
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-lang="ja">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  </div>
  <div id="socialButton-fb">
    <iframe src="http://www.facebook.com/plugins/like.php?href=
      <?php the_permalink() ?>&layout=box_count&show_faces=false&width=90&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:62px;" allowTransparency="true">
    </iframe>
  </div>
  <div id="socialButton-htb">
    <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="vertical-balloon" 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>
  </div>
  <div id="socialButton-comm">
    <g:plusone size="tall" href="
      <?php the_permalink() ?>">
    </g:plusone>
    <script type="text/javascript">(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po,s);})();</script>
  </div>
  <div id="socialButton-comm">
    <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
    <a href="#" onclick="Evernote.doClip({}); return false;">
      <img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" />
    </a>
  </div>
  <div id="socialButton-comm">
    <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
    <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
  </div>
</div>
<div style="clear:both"></div>

CSS – エントリー毎

そしてエントリー毎のCSSです。

#socialButton {
  margin:0px 0px 20px 0px;
}
#socialButton-comm {
  float:left;
  margin:10px 10px 10px 10px;
}
#socialButton-fb {
  float:left;
  margin:10px 0px 10px 10px;
}
#socialButton-htb {
  float:left;
  margin:10px 10px 10px 0px;
}

iPhone

iPhoneの場合は2箇所で表示していますが、共に同じコードを使用し設置しています。
大ちゃん（@delaymania）のブログのソースコードを大いに参考にさせてもらいました。

HTML

<div style="" id="socialButton">
  <ul id="socialMap">
    <!-- twitter -->
    <li id="socialButton-comm">
      <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </li>
    <!-- Facebook -->
    <li id="socialButton-fb">
      <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=box_count&show_faces=false&width=90&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:62px;" allowTransparency="true"></iframe>
    </li>
    <!-- Hatebu -->
    <li id="socialButton-htb">
      <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="vertical-balloon" 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>
    </li>
    <!-- Google Plus -->
    <li id="socialButton-comm">
      <g:plusone size="tall" href="<?php the_permalink() ?>"></g:plusone><script type="text/javascript">(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po,s);})();</script>
    </li>
  </ul>
</div>
<div style="" id="socialButton">
  <ul id="socialMap">
       <!-- Pocket -->
       <li id="socialButton-comm">
      <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
    </li>
  </ul>
</div>

CSS

div#socialButton {
    display: inline-block;
    height: 80px;
    margin: 0px 0px -10px 0px;
    text-align: center;
    width: 300px;
}
#socialMap{
  margin: 0;
  padding: 0;
}
li#socialButton-comm {
  display: inline-block;
  float: left;
  list-style-type: none;
  margin-right: 8px;
}
li#socialButton-fb {
  display: inline-block;
  float: left;
  list-style-type: none;
  margin:0px 0px 0px -3px;
}
li#socialButton-htb {
  display: inline-block;
  float: left;
  list-style-type: none;
  margin:0px 5px 0px -15px;
}

こんな工夫もありますよ

ソーシャルボタンを後読みさせるやり方。
こちらのエントリーを参考にソーシャルボタンの後読みをさせてみました。

しかし、このあと読み。
Pocketのブログパーツだけ表示されたりされなかったりという現象。

後読みさせず通常の表示（レスポンスが返ってきたら後読みぜず、そのまま表示）だと問題なく表示されます。
原因がよく分からないんですよね〜( ´﹏ˋ)
PCから見た際、左サイドにもソーシャルのボタンがあり、ここにもPocketのブログパーツがあります。
これとかちあって上手く表示されないのかなーなんて勝手に思ってます。

しかし、それなら他のボタンも状況としては同じなので似た事が起きてもいいはずなのに起きない。
ん〜。分からん。

Pocketが無い状態だと後読み除いて平均3〜4秒で画面が表示されます。
その後にSNSボタンの後読みが行われます。

こうする事でGoogleの検索エンジンからもインデックスされやすくなるのかなと思います。

自分はPocketのブログパーツがあるので今は後読みを断念してます。

ボタンのHTMLを簡単に作れるサービス

春友（@speing_friends）さんの↑エントリーはPCから閲覧した場合にスクロールしても追従するソーシャルボタンの設置エントリーです。
このエントリーの中に簡単にソーシャルボタンを作るサービスへのリンクが貼られています。

Pocketについては以下のオフィシャルサイトでHTMLが取得出来ます。

参考にさせて頂いた他ブログエントリー

ソーシャルボタンの設置で下記にあげるエントリーを参考にさせてもらいました。
エントリーの内容以外にもブログのソースコード、HTML、CSS、jQueryも参考にさせてもらいました。

最後に

プラグインや外部サービス使ったソーシャルボタン設置も良いですが、自前でコード弄って設置するのも良いですね(^-^)
ブログを作ってる！っいう感じが楽しいですね。

自分の場合、そのまま仕事でも使えるのでとても良い勉強になります

URL :
TRACKBACK URL :

Comments & Trackbacks

  • コメント ( 0 )
  • トラックバック ( 15 )

No commented yet.

  1. 【コンピューター】 次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集 | DesignDevelop 2013年05月19日 夕刊 | aquadrops * news
    2013年5月19日(日曜日) at 5:00 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  2. 【iPhone】 私「それ私のですよね？」→泥ママ「この人頭おかしい！！ドロボーーーー！！！」 : 素敵な鬼女様 -修羅場・鬼女・キチ系まとめ- 2013年05月19日 夕刊 | aquadrops * news
    2013年5月19日(日曜日) at 5:01 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  3. 【iPhone】 iOS 7は「フラットデザイン」に大幅変更される？ その背景とは。 – たのしいiPhone！ AppBank 2013年05月20日 深夜便 | aquadrops * news
    2013年5月20日(月曜日) at 12:01 AM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  4. 【iPhone】 iOS 7は「フラットデザイン」に大幅変更される？ その背景とは。 – たのしいiPhone！ AppBank 2013年05月20日 朝刊 | aquadrops * news
    2013年5月20日(月曜日) at 5:00 AM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  5. 【iPhone】 知らなかった！誰よりも早く、確実に情報を手に入れる３つの方法 | ENJILOG 2013年05月20日 昼刊 | aquadrops * news
    2013年5月20日(月曜日) at 12:01 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  6. 【iPhone】 iPhoneやiPadを長く使うためにバッテリーについて意識したい注意点 – もとまか日記 2013年05月20日 夕刊 | aquadrops * news
    2013年5月20日(月曜日) at 5:00 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  7. 【iPhone】 大辞泉がソーシャルゲームになった理由 | HMDT Blog 2013年05月21日 深夜便 | aquadrops * news
    2013年5月21日(火曜日) at 12:00 AM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  8. 【iPhone】 iPhoneゲームでインタラクティブミュージックに挑戦してみた話 – 5.1さらうどん 2013年05月21日 朝刊 | aquadrops * news
    2013年5月21日(火曜日) at 5:01 AM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  9. 【iPhone】 コンセントを使ったLAN構築が簡単快適すぎて驚きが隠せない件。無線LANの電波が届かないなら…PLCのススメ。 2013年05月21日 昼刊 | aquadrops * news
    2013年5月21日(火曜日) at 12:01 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  10. 【iPhone】 au「4G LTE」をiPhone 5で使用した場合の実人口カバー率は14％だったことが判明 – GIGAZINE 2013年05月21日 夕刊 | aquadrops * news
    2013年5月21日(火曜日) at 5:01 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  11. 【iPhone】 au iPhone 5 で LTE が使えるエリアは 14% より広いという話 – 新生おともだち研究会 2013年05月22日 深夜便 | aquadrops * news
    2013年5月22日(水曜日) at 12:05 AM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  12. 【iPhone】 au iPhone 5 で LTE が使えるエリアは 14% より広いという話 – 新生おともだち研究会 2013年05月22日 朝刊 | aquadrops * news
    2013年5月22日(水曜日) at 5:00 AM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  13. 【iPhone】 不当表示でＫＤＤＩ窮地、「ｉＰｈｏｎｅで優位に」への焦り　　：日本経済新聞 2013年05月22日 昼刊 | aquadrops * news
    2013年5月22日(水曜日) at 12:00 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  14. 【iPhone】 とんでもなく参考になりすぎるEvernote使用例 7 〜@takaiphone2010 の全ノートブック晒し＆Evernote運用術〜 | OZPAの表4 2013年05月22日 夕刊 | aquadrops * news
    2013年5月22日(水曜日) at 5:00 PM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん！ | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  15. すごい便利！WordPressでブログをリニューアルするときに役立つ３０ | コムテブログ
    2013年6月17日(月曜日) at 8:32 AM

    […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載！ | stryhの日記 ~stryh/changelog […]

Leave a reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Return Top