SNSボタンを格好良くしてみた！

これからのブログはSNSとの連携が重要らしい。
そこで、SNSボタンを強化してみた。
ちょっと古めかしいボタンをステキにしてみた。

<div class="sns">
	<ul class="clearfix">
		<!--ツイートボタン-->
		<li class="twitter">
		<a rel="nofollow" onclick="window.open('//twitter.com/intent/tweet?url=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>&amp;tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fa fa-twitter"></i><span class="snstext ">Twitter</span></a>
		</li>

		<!--シェアボタン-->      
		<li class="facebook">
		<a href="//www.facebook.com/sharer.php?src=bm&amp;u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i><span class="snstext ">Share</span>
		</a>
		</li>

		<!--Google+1ボタン-->
		<li class="googleplus">
		<a href="//plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i><span class="snstext ">Google+</span></a>
		</li>

		<!--ポケットボタン-->      
		<li class="pocket">
		<a rel="nofollow" onclick="window.open('//getpocket.com/edit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>', '', 'width=500,height=350'); return false;"><i class="fa fa-get-pocket"></i><span class="snstext ">Pocket</span></a></li>

		<!--はてブボタン-
		<li class="hatebu">       
			<a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>" rel="nofollow" data-hatena-bookmark-initialized="1"><i class="fa st-svg-hateb"></i><span class="snstext ">Hatena</span>
			</a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
		</li>
->  
		<!--LINEボタン-->   
		<li class="line">
		<a href="//line.me/R/msg/text/?<?php the_title(); ?>%0A<?php the_permalink(); ?>" target="_blank" rel="nofollow"><i class="fa fa-comment" aria-hidden="true"></i><span class="snstext">LINE</span></a>
		</li>     
	</ul>
</div>

はてなブログだけボタンのイメージが出てこなかったので、仕方なくコメントアウトしておいた。大して使われていないはずだから、たぶん大丈夫だと思われる。

実際に変更した結果は、このページの下にあるボタンだよ！

システム開発

Posted by @erestage