コピペのヤツ！SNSのボタンコードまとめ

ああ、毎回調べるのが面倒ですよね！アレ！ でも、調べようと思うので、せっかくなので記事にします。ども、カンマンのフロントエンド担当、阿部です。

tweetボタン

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Twitterボタン | About

Facebookのボタン

<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

Like Button for Web

はてブのボタン

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

lineのボタン

<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"e"});
</script>
</span>

pocketのボタン

<a data-pocket-label="pocket" data-pocket-count="horizontal" 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>

とりあえずコピペで動くと思いますよ。

ただ、複数個付けるときにはscriptは一回だけ読めば大丈夫のヤツです。

オフィシャルのボタンは重い！というあなたにはオリジナルボタンを

<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>">ツイート</a>

<a 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;">シェア</a>

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Google Plus</a>

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>">はてブ</a>

<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

WordPressのかたならこいつらをコピペでポンと、軽量なオリジナルのSNSシェアボタンです。 アイコンフォントやCSSで簡単に装飾できるので、軽さを求める方はこっちがいいかも。

まとめ

何回も調べるのが面倒なので、しばらくはこのページをブクマしてやり過ごそうと思います。 お役に立てば幸いです。 ではまた。