kz’s blog

興味のあることについて書いていきます。

はてなブログで使用可能な変数について

はじめに

はてなブログには下記のような使用可能な変数があります。

変数 説明
{Title} 記事タイトル
{Permalink} 記事URL
{BlogTitle} ブログタイトル
{BlogURL} ブログURL
{URLEncodedTitle} URLエンコードされた記事タイトル
{URLEncodedPermalink} URLエンコードされた記事URL
{URLEncodedBlogTitle} URLエンコードされたブログタイトル
{URLEncodedBlogURL} URLエンコードされたブログURL

この変数を使用したところ少しハマりましたので書いておきます。

ハマった内容

SNSのシェアボタンをカスタマイズしようとして、ブックマーク数等を取得するために{Permalink}フッタで使用したのですが、ブックマーク数がうまく反映されませんでした。

console.log('{Permalink}')を埋め込んだところ、記事のURLに変換されずに、そのまま{Permalink}と出力されておりました。

原因

調べた結果、どうやら記事上下の部分で使用するものなので、フッタでは使用できないようでした。

ヘルプページに書いてありました。

対処

僕はフッタでjQueryの読み込みを行なっているので、ブックマーク数等の取得ロジックはどうしてもフッタに配置したかったのですが諦めるしかありません。

※jQuery を先に読み込まないとブックマーク数取得ロジックが動作しない。また、フッタよりも先に記事上下のロジックが読み込まれる。

そこで、フッタ内でのjQueryの読み込みは諦めて、詳細設定の「headに要素を追加」の部分でjQueryを読み込ませることにしました。

f:id:kz62:20180824110231p:plain

<!-- jQuery 読み込み -->
<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js"></script>

これで記事上下でもjQueryが使用可能になります。

懸念事項

こちらの記事に書いてある通り、jQueryの読み込みが完了するまでページの読み込みが止まってしまうのが懸念事項として挙げられます。

おわりに

ひとまず、しばらくはこれで運用しようと思います。

もっといい方法があれば判明次第そちらの方法にシフトしようと思っています。

あと、結局ブックマーク数は取得しないようにしました。もともとブックマークしてくださる方が少ないので、ブックマーク数を表示しても、みっともないだけだと思うので(泣)