Blogger自作SNSボタン・キャッシュ高速化

SNSボタンを表示する自作テンプレートのjavascriptキャッシュ高速化版です。

Blogger自作SNSボタン のキャッシュ高速化版です。twitter、facebook、はてなブックマーク、LINE、note、Pocketです。テンプレートの</body>の前に書きます。

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

以下のhtmlをテンプレートのSNSボタンを表示したい位置に書きます。

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

cssは以下になります。テンプレートの</head>の前に書きます。

<style>
.share-twitter,.share-facebook,.share-hatena,.share-line,.share-note,.share-pocket{
margin:0;
padding:0 .5em;
color:#fff;
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>

キャッシュ高速化には以下の変更も必要です。
Blogger自作テンプレートのキャッシュ高速化