Twitterツイートボタン吹き出し(右)リンク作成方法サンプル
HTML
<div class="twitter-btn-wrap">
<a href="https://twitter.com/share" class="twitter-share-button"{count}>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>
</div>
CSS
.twitter-btn-wrap {
display: inline-block;
}
.twitter-btn-wrap .balloon {
display: inline-block;
position: relative;
padding: 0 3px;
border: 1px solid #bbb;
border-radius: 3px;
background: #fff;
color: #333;
font: 11px/18px "Helvetica Neue",Arial,sans-serif;
text-decoration: none;
white-space: nowrap;
vertical-align: top;
}
.twitter-btn-wrap .balloon:hover {
text-decoration: underline;
}
.twitter-btn-wrap .balloon::before,
.twitter-btn-wrap .balloon::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
line-height: 0;
margin: -4px 0 0 -4px;
border-style: solid solid solid none;
border-width: 4px 4px 4px 0;
}
.twitter-btn-wrap .balloon::before {
border-color: transparent #aaa transparent #aaa;
margin: -4px 0 0 -4px;
}
.twitter-btn-wrap .balloon::after {
border-color: transparent #fff;
margin: -4px 0 0 -3px;
}
JavaScript
!function(d){
var t = d.querySelector('.twitter-btn-wrap'),
a = d.createElement('a'),
c = d.createTextNode('見る');
a.className = 'balloon';
a.href = 'https://twitter.com/search?ref_src=twsrc%5Etfw&q=' +
encodeURIComponent(d.location.href);
a.target = '_blank';
a.appendChild(c);
t.appendChild(a);
}(document);