megane9988
7/21/2013 - 8:41 PM

ソーシャルボタンを自作する際のリンク指定

ソーシャルボタンを自作する際のリンク指定


<div class="socialbigbt">
    <a class="twitter_button" href="
    https://twitter.com/intent/tweet?original_referer=<?php the_permalink(); ?>&text=<?php echo the_title(); ?>&tw_p=tweetbutton&url=<?php the_permalink(); ?>
    ">twitterでつぶやく!</a>
    <a class="facebook_button" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>/&t=<?php echo the_title(); ?>" target="_brank">facebookでシェア!</a>
</div>

------


/*ソーシャルボタン*/
.twitter_button {
  font-size: 14px;
  padding-top: 15px;
  padding-right: 80px;
  padding-bottom: 15px;
  padding-left: 80px;
  text-decoration: none;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  text-shadow: 0px 1px 3px #666666;
  border: solid #e02479 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fc3f94), to(#fc0574));
  background: -moz-linear-gradient(top, #fc3f94, #fc0574);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fc3f94, endColorStr=#fc0574);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fc3f94, endColorStr=#fc0574);
  display:inline-block; /* IE is so silly */
}
.twitter_button:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fa3f8a), to(#ff40a9));
  background: -moz-linear-gradient(top, #fa3f8a, #ff40a9)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fc3f94, endColorstr=#fc0574);
}
.main a:link.twitter_button {
  font-family: Arial;
  color: #ffffff;  
}
.facebook_button {
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding-top: 15px;
  padding-right: 80px;
  padding-bottom: 15px;
  padding-left: 80px;
  text-decoration: none;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  text-shadow: 0px 1px 3px #666666;
  border: solid #255ade 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#4599ff), to(#3f64fa));
  background: -moz-linear-gradient(top, #4599ff, #3f64fa);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4599ff, endColorStr=#3f64fa);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4599ff, endColorStr=#3f64fa);
  display:inline-block; /* IE is so silly */
}
.facebook_button:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#5476ff), to(#264aff));
  background: -moz-linear-gradient(top, #5476ff, #264aff)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4599ff, endColorstr=#3f64fa);
}
.main a:link.facebook_button,
.main a:visited.facebook_button{
  font-family: Arial;
  color: #ffffff;  
}

.socialbigbt{
text-align: center;
margin-bottom: 30px;
}