Blogger自作SNSボタン

SNSボタンを表示する自作テンプレートのjavascriptです。

twitter、facebook、はてなブックマーク、LINE、note、Pocketです。どこにでも何個でも表示させることができます。

SNSボタンを表示したい場所に書く。

<div>
<a class='share-twitter' href='#' rel='nofollow noopener noreferrer' target='_blank' onclick='clickSnsLink(this)' title='twitter'>twitter</a>
<a class='share-facebook' href='#' rel='nofollow noopener noreferrer' target='_blank' onclick='clickSnsLink(this)' title='facebook'>facebook</a>
<a class='share-hatena' href='#' rel='nofollow noopener noreferrer' target='_blank' onclick='clickSnsLink(this)' title='はてな'>はてな</a>
<a class='share-line' href='#' rel='nofollow noopener noreferrer' target='_blank' onclick='clickSnsLink(this)' title='LINE'>LINE</a>
<a class='share-note' href='#' rel='nofollow noopener noreferrer' target='_blank' onclick='clickSnsLink(this)' title='note'>note</a>
<a class='share-pocket' href='#' rel='nofollow noopener noreferrer' target='_blank' onclick='clickSnsLink(this)' title='Pocket'>Pocket</a>
</div>

SNSボタンのjavascriptは以下になります。テンプレートの</body>の前に書きます。

<script>
/*<![CDATA[*/
function clickSnsLink(obj){
  const blogurl=encodeURIComponent(location.protocol+'//'+location.hostname+location.pathname);
  const blogname=encodeURIComponent(document.title);
  let objclass=obj.getAttribute('class');
  if(objclass=='share-twitter'){
    obj.setAttribute('href','https://twitter.com/intent/tweet?url='+blogurl+'&text='+blogname);
  }else if(objclass=='share-hatena'){
    obj.setAttribute('href','https://b.hatena.ne.jp/add?mode=confirm&url='+blogurl+'&title='+blogname);
  }else if(objclass=='share-facebook'){
    obj.setAttribute('href','https://www.facebook.com/sharer.php?u='+blogurl);
  }else if(objclass=='share-line'){
    obj.setAttribute('href','https://social-plugins.line.me/lineit/share?url='+blogurl);
  }else if(objclass=='share-note'){
    obj.setAttribute('href','https://note.mu/intent/post?url='+blogurl);
  }else if(objclass=='share-pocket'){
    obj.setAttribute('href','http://getpocket.com/edit?url='+blogurl);
  }
}
/*]]>*/
</script>

cssは以下のようになります。

<style>
.share-twitter,.share-facebook,.share-hatena,.share-line,.share-note,.share-pocket{
margin:0;
padding:.25em 1em;
color:#fff !important;
font-weight:bold;
border-radius:.5em;
}
.share-twitter{
background:#1d9bf0;
}
.share-facebook{
background:#1877f2;
}
.share-hatena{
background:#00a4de;
}
.share-line{
background:#00b900;
}
.share-note{
background:#41c9b4;
}
.share-pocket{
background:#ef4154;
}
</style>

条件次第で高速化するjavascriptもあります。
Blogger自作SNSボタン・キャッシュ高速化