【wordpress】SNSシェアボタンをいわゆるバイラルメディア風にカスタマイズしてみた

今我が家の洗面所では洗面器の交換のために業者さんが来てくれていますが、僕はブログ更新しています。チャットです。

ここ最近いいペースでブログをカスタマイズしてってます。

とくれば次はせっかく書いた独り言でも少しでも多くの方に見てもらいたいと思うのが人の性。

多くの人に見てもらうためには人から人へ、拡散してもらうのが一つの方法としてあげられます。

見てくれた人に拡散してもらうためには拡散しやすいUIを配置する必要があると考えました。

ではいきます（笑）

stinger5での話になりますがたぶんどのテーマでもやることは同じです。細かい違いは脳内変換してください。

今日のゴール

 

スクリーンショット_2015-09-05_10_25_52

こいつを、

 

スクリーンショット_2015-09-05_12_13_53

こうします。

 

 

sns.phpを編集

 

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="【＠抜きの自分のID】" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" 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>
    </ul>
  </div>

もともとこんなコードになってると思いますが全部削除します。（言うまでもありませんがバックアップは取ってください。）

削除して、

PHP
1
2
3
4
5
6
7
<div class="snsshare">
<a id="share_fb" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>"onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Facebookでシェア</a>
<a id="share_tw" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=【＠抜きの自分のID】" target="blank">Twitterでシェア</a>
<a id="share_hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>%20%2d%20No%2e1026" target="_blank">はてなブックマーク</a>
<a id="share_line" href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F">LINEで送る</a>
<a id="share_google" href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>'+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();">Google+でシェア</a>
</div>

このコードと置き換えます。

※ツイッターの部分だけ自分のIDで置き換える必要があるのでご注意を。（ツイッターなんてやってねえよヽ(`Д´)ノって方は記述しなくても良いです）

すると。

スクリーンショット 2015-09-05 10.53.45

 

こんな風になると思います。

これで( ・∀・)ｲｲ!!

って人はこの先は読む必要ありません。

では次にcssを編集してボタンっぽい感じにしていきます。

style.cssを編集

最下行に、

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.snsshare {
width: 100%;
height: 280px;
margin-bottom: 10px;
}
.snsshare a {
width: 100%;
height: 30px;
margin-bottom: 10px;
padding: 14px 0;
float: left;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-align: center;
letter-spacing: 0.1em;
display: inline-block;
text-decoration: none;
}
.snsshare a:hover {
color: #ffffff;
text-decoration: underline;
}
.snsshare a#share_fb {
background-color: #3B5998;
border-bottom: 1px solid #3C5A98;
}
.snsshare a#share_tw {
background-color: #00ACEE;
border-bottom: 1px solid #0193CB;
}
.snsshare a#share_hatena {
background-color: #008FDE;
border-bottom: 1px solid #007BBF;
}
.snsshare a#share_feedly {
background-color: #70CA3B;
border-bottom: 1px solid #69A205;
}
.snsshare a#share_google {
background-color: #D43D37;
border-bottom: 1px solid #8D2D1D;
}
.snsshare a#share_line {
background-color: #00C300;
border-bottom: 1px solid #21AA10;
}

を追記。

※CSSは下に書かれている行を優先するので既存とかぶっても問題はありません。

以上です。

じゃじゃーん。といい感じにそれっぽくなったかと思います。

もし、2行で表示させたくば、

widthの部分を50％に変えてみるといいかもしれません。

今日の一言

洗面器屋さんですが、もともとついてた洗面器をハンマーでガシャンガシャンと割って取り替えててびびってたビビるチャットより。
※以前に取り付けた業者が強力なボンドで洗面器をつけてて普通の方法じゃ外せなかったようです。

 

 

wordpress

Posted by chat