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: block;
  position: relative;
  margin-bottom: 5px;
  padding: 0 5px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  color: #333;
  font: 16px/34px "Helvetica Neue",Arial,sans-serif;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.twitter-btn-wrap .balloon:hover {
  text-decoration: underline;
}
.twitter-btn-wrap .balloon::before,
.twitter-btn-wrap .balloon::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  line-height: 0;
  border: 4px transparent solid;
  border-bottom: 0;
}
.twitter-btn-wrap .balloon::before {
  margin: 0 0 -4px -4px;
  border-top-color: #aaa;
}
.twitter-btn-wrap .balloon::after {
  margin: 0 0 -3px -4px;
  border-top-color: #fff;
}

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.insertBefore(a, t.firstChild);
}(document);