公式ツイートボタンを試す。

GeckoTang

2010-08-13 20:50:19

License: MIT License

Fork: 0

Fav: 0

View: 936

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 12 lines
HTML 47 lines
CSS 63 lines

公式ツイートボタンを試す。
jQuery v1.4.2

<h1>html</h1>
<a class="tweetbtn_1" href="http://twitter.com/share?url=http%3A%2F%2Fjsdo.it%2F&text=jsdo.it%E3%81%A7%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%82%82%E3%82%8A%E3%82%82%E3%82%8A%E6%9B%B8%E3%81%8D%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%EF%BC%81&via=jsdo_it&related=jsdo_it%3AThe+Javascript+API" target="_blank">ツイートする</a>

<h1>javascript<h1>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<h2>count</h2>
<div id="count">
</div>  
<h2>vertical</h2>
<div>
   <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="http://jsdo.it/"
      data-via="jsdo_it"
      data-text="jsdo.itでコードをもりもり書きましょう！"
      data-related="jsdo_it:The Javascript API"
      data-count="vertical">Tweet</a>
</div>
<h2>horizontal</h2>
<div>
   <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="http://jsdo.it/"
      data-via="jsdo_it"
      data-text="jsdo.itでコードをもりもり書きましょう！"
      data-related="jsdo_it:The Javascript API"
      data-count="horizontal">Tweet</a>
</div>
<h2>none</h2>
<div>
   <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="http://jsdo.it/"
      data-via="jsdo_it"
      data-text="jsdo.itでコードをもりもり書きましょう！"
      data-related="jsdo_it:The Javascript API"
      data-count="none">Tweet</a>
</div>
  
<h2>none del:data-related</h2>
<div>
   <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="http://jsdo.it/"
      data-via="jsdo_it"
      data-text="jsdo.itでコードをもりもり書きましょう！"
      data-count="none">Tweet</a>
</div>

公式ツイートボタンを試す。

body{font-size:12px; background:#333; color:#fff;}
h2{
  font-size:14px;
  border-bottom:1px dashed #666;
}
.tweetbtn_1 {
  position:relative;
  display: inline-block;
  padding:5px 10px 5px 30px;
  border:1px solid #a4cce5;
  border-bottom-color:#a0baca;
  border-radius:5px;
  -webkit-background-clip: padding-box;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background-clip: padding-box;
  background:#fff;
  background: -moz-linear-gradient(top, #fff, #d3e6f2);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d3e6f2));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#d3e6f2);
  font-weight: bold;
  color:#186487;
  text-decoration:none;
  text-shadow:1px 1px 1px #fff;
}
.tweetbtn_1:before {
  content:url('http://a4.twimg.com/images/favicon.png');
  display:block;
  position:absolute;
  top:-32%;
  left:-7px;
  -webkit-transform:rotate(-20deg);
  -moz-transform:rotate(-20deg);
}
.tweetbtn_1:hover{
  color: #0b3752;
  border-color:#53a3d6;
  border-bottom-color:#68a0c4;
  background: -moz-linear-gradient(top, #fff, #c1def0);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c1def0));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#c1def0);
}

.tweetbtn_1{
  -webkit-animation-name: disneet;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
}
@-webkit-keyframes disneet {
  from{
    top:0px;
  }
  to{
    top:-5px;
  }
}

//http://urls.api.twitter.com/1/urls/count.json?url=http://jsdo.it/ $(function(){ /* window.twttr = {}; window.twttr.receiveCount = function(json){ $("#count").html(json); }; $.getScript("http://urls.api.twitter.com/1/urls/count.json?url=http://jsdo.it/"); */ }); <h1>html</h1> <a class="tweetbtn_1" href="http://twitter.com/share?url=http%3A%2F%2Fjsdo.it%2F&text=jsdo.it%E3%81%A7%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%82%82%E3%82%8A%E3%82%82%E3%82%8A%E6%9B%B8%E3%81%8D%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%EF%BC%81&via=jsdo_it&related=jsdo_it%3AThe+Javascript+API" target="_blank">ツイートする</a> <h1>javascript<h1> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <h2>count</h2> <div id="count"> </div> <h2>vertical</h2> <div> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://jsdo.it/" data-via="jsdo_it" data-text="jsdo.itでコードをもりもり書きましょう！" data-related="jsdo_it:The Javascript API" data-count="vertical">Tweet</a> </div> <h2>horizontal</h2> <div> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://jsdo.it/" data-via="jsdo_it" data-text="jsdo.itでコードをもりもり書きましょう！" data-related="jsdo_it:The Javascript API" data-count="horizontal">Tweet</a> </div> <h2>none</h2> <div> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://jsdo.it/" data-via="jsdo_it" data-text="jsdo.itでコードをもりもり書きましょう！" data-related="jsdo_it:The Javascript API" data-count="none">Tweet</a> </div> <h2>none del:data-related</h2> <div> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://jsdo.it/" data-via="jsdo_it" data-text="jsdo.itでコードをもりもり書きましょう！" data-count="none">Tweet</a> </div> body{font-size:12px; background:#333; color:#fff;} h2{ font-size:14px; border-bottom:1px dashed #666; } .tweetbtn_1 { position:relative; display: inline-block; padding:5px 10px 5px 30px; border:1px solid #a4cce5; border-bottom-color:#a0baca; border-radius:5px; -webkit-background-clip: padding-box; -webkit-border-radius:5px; -moz-border-radius:5px; background-clip: padding-box; background:#fff; background: -moz-linear-gradient(top, #fff, #d3e6f2); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d3e6f2)); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#d3e6f2); font-weight: bold; color:#186487; text-decoration:none; text-shadow:1px 1px 1px #fff; } .tweetbtn_1:before { content:url('http://a4.twimg.com/images/favicon.png'); display:block; position:absolute; top:-32%; left:-7px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); } .tweetbtn_1:hover{ color: #0b3752; border-color:#53a3d6; border-bottom-color:#68a0c4; background: -moz-linear-gradient(top, #fff, #c1def0); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c1def0)); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#c1def0); } .tweetbtn_1{ -webkit-animation-name: disneet; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; } @-webkit-keyframes disneet { from{ top:0px; } to{ top:-5px; } }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/39eO/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/GeckoTang/39eO" title="公式ツイートボタンを試す。">公式ツイートボタンを試す。 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

公式ツイートボタンを試す。

tags

Tweet

twitter

Tags