てがろぐにSNSシェアボタン

てがろぐにSNSシェアボタンをつけるコードの覚書です。

記述するのはskin-onelog.html

最低限必要なのはシェアしたいURLですが、てがろぐの場合は[[PERMAURL:PURE:FULL]]（Ver3.8.0以前は[[PARMAURL:PURE:FULL]]）のスキン記法を使います。このスキン記法キーワードは記事単体ページをデフォルトスキンで表示するための固有URLを絶対URI（http(s)～から始まるURL）で出力します。

このスキン記法キーワードを使うことで「自分のサイトURLがhttp://～で始まるのかhttps://～で始まるのか」ということや「自分のてがろぐ単体記事URLが/tegalog.cgi?=postid～なのか/?=postid～なのか」などのことを意識しなくてもシェアしたいURLを出力できます。多分。

ツイッターやフェイスブックなど、テキストもシェアできる場合は以下のいずれかを使います。

[[COMMENT:TEXT:文字数]] … 投稿本文から指定した文字数＋「…」を出力
[[COMMENT:TITLE]] … 投稿本文1行目を出力
[[COMMENT:TITLE:文字数]] …投稿本文1行目から指定した文字数＋「…」を出力

コピペ用SNSシェアリンクタグ

Twitter

Ver 3.8.0以前

<a href="https://twitter.com/intent/tweet?url=[[PARMAURL:PURE:FULL]]&text=[[COMMENT:TEXT:30]]" title="ツイッターに投稿" target="_blank" rel="noopener" class="share">Twitter</a>

Ver 3.8.4β以降

<a href="https://twitter.com/intent/tweet?url=[[PERMAURL:PURE:FULL]]&text=[[COMMENT:TEXT:30]]" title="ツイッターに投稿" target="_blank" rel="noopener" class="share">Twitter</a>

Facebook

Ver 3.8.0以前

<a href="https://www.facebook.com/sharer/sharer.php?u=[[PARMAURL:PURE:FULL]]&t=[[COMMENT:TEXT:30]]" title="フェイスブックに投稿" target="_blank" rel="noopener" class="share">Facebook</a>

Ver 3.8.4β以降

<a href="https://www.facebook.com/sharer/sharer.php?u=[[PERMAURL:PURE:FULL]]&t=[[COMMENT:TEXT:30]]" title="フェイスブックに投稿" target="_blank" rel="noopener" class="share">Facebook</a>

はてなブックマーク

Ver 3.8.0以前

<a href="https://b.hatena.ne.jp/add?mode=confirm&url=[[PARMAURL:PURE:FULL]]" title="はてなブックマーク" target="_blank" rel="noopener" class="share">Hatena</a>

Ver 3.8.4β以降

<a href="https://b.hatena.ne.jp/add?mode=confirm&url=[[PERMAURL:PURE:FULL]]" title="はてなブックマーク" target="_blank" rel="noopener" class="share">Hatena</a>

LINE

Ver 3.8.0以前

<a href="https://social-plugins.line.me/lineit/share?url=[[PARMAURL:PURE:FULL]]" title="LINE" target="_blank" rel="noopener" class="share">LINE</a>

Ver 3.8.4β以降

<a href="https://social-plugins.line.me/lineit/share?url=[[PERMAURL:PURE:FULL]]" title="LINE" target="_blank" rel="noopener" class="share">LINE</a>

Pocket

Ver 3.8.0以前

<a href="https://getpocket.com/edit?url=[[PARMAURL:PURE:FULL]]&title=[[COMMENT:TEXT:30]]" title="Pocket" target="_blank" rel="noopener" class="share">Pocket</a>

Ver 3.8.4β以降

<a href="https://getpocket.com/edit?url=[[PERMAURL:PURE:FULL]]&title=[[COMMENT:TEXT:30]]" title="Pocket" target="_blank" rel="noopener" class="share">Pocket</a>

class="share"をつけているので.shareに対してCSSでスタイルを指定することができます。

複数スキンを並行して使っていて一時適用スキンで表示するURLをシェアしたい場合

jQueryで上記のシェアURLを置換します。あまりスマートな書き方ではないと思いますが一例として下記のスクリプトでできることを確認しています（てがろぐ Ver 3.8.1β以降でのみ動作します）。もっとスマートな書き方があれば教えてください…

<script>
	$(function(){
	var shareurl = $("a.share").attr("href").split('postid=');
	var skindir = '[[PATH:SKINDIR]]';
	var skinname = skindir.split('/');
	var shareurl2 = shareurl[0] + 'skin=' + skinname[2] + '&postid=' + shareurl[1];
	$("a.share").attr("href", shareurl2)
	});
</script>

ありがとうございます！