ShereボタンをつくるJS

Shere.css

p.Shere{
	display: table;
	vertical-align: middle;
	float: right;
	font-weight: bold;
	margin: 6px;
	border:solid 1px #fff;
	border-radius: 10px;
	text-align: center;
	width: 20px;
	height: 20px;
	margin: 5px;
	padding:0px 2px;
}

Shere.js

// jQueryが必要です！！　Webなどで導入してください！

$(document).ready(function(){
  var Surl = location.href;
  var Stit = document.title;
  var Sary = [
    [ 't' , 'https://twitter.com/intent/tweet?text=','#55acee'],
    [ 'g' , 'https://plus.google.com/share?url=','#db4a39'],
  ];
  // 上の配列を分けるシステム
  for (var i = 0; i < 2; i++) {
  	switch(Sary[i][0]) {
  		case "t":
	    	var Sall = Stit + " " + Surl;
  			break;
  		case "g":
  			var Sall = Surl;
  			break
  	}
    // titleはアイコンを置きたいDivやpなどの場所
	  $('#title').append('<p class="Shere Sary_'+ Sary[i][0] +'" link="'+Sary[i][1]+Sall+'">'+ Sary[i][0] + '</p>');
	  $('.Sary_'+ Sary[i][0]).css('background',Sary[i][2]);
	  $('.Shere').click(function(){
	    var Shref= $(this).attr("link")
	  	window.open(Shref, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes');
	  	return false;
	  });
	  $('.Shere').hover(
	  function(){
	  		$(this).css('opacity', '0.5');
	  },
	  function(){
	  		$(this).css('opacity','1');
	  });
  };
});

見た目はこんな感じ