stryhのchangelog

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a reply

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

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

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

Return Top