Twitterツイートボタン吹き出し(右)リンク作成方法サンプル

Tweet

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);