2025年6月15日日曜日

日曜日, 6月 15, 2025
BloggerにAddClipsボタンを貼り付けるソーシャルブックマークとRSSが1つのボタンで登録できるAddClipsは便利なツールで導入しているブロガーをたくさん見かけます。

しかし、Blogger用を選択したにもかかわらず、生成されたコードをBloggerに貼り付けるとAddClips IDのエラーになってしまうことがあります。エラー無く正しく稼動させるためには少しコードを修正する必要があるようです。

AddClipsコードをエンティティ文字変換

以下のコードがオリジナルで生成されたコードです。
<!-- AddClips Code START -->
<script type="text/javascript">
<!--
AddClipsUrl = '<data:post.url/>';
AddClipsTitle = '<data:post.title/>';
AddClipsId = '123456789ABCD';
AddClipsBcolor='#336699';
AddClipsNcolor='#528BC5';
AddClipsTcolor='#FFFFFF';
AddClipsType='0';
AddClipsVerticalAlign='middle';
AddClipsDefault='bookmark';
AddClipsTab = 'bookmark';
// -->
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js"
charset="utf-8"></script>
<!-- AddClips Code END -->
AddClipsの指示通り、ボタンを貼り付ける場所はタイトル下、記事の上ですが、ここに表示させるためにはBloggerのHTMLの中に貼り付けることになります。しかし、BloggerのHTML内で<や>などの記号はエラーで認識できませんから、これをエンティティコードに変換することになります。

ところが全部を変換してしまうとエラーになってしまいます。
とりあえずエンティティ文字に置換したAddClipsのコードは次の通り。
&amp;lt;!-- AddClips Code START --&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
&amp;lt;!--
AddClipsUrl = '&amp;lt;data:post.url/&amp;gt;';
AddClipsTitle = '&amp;lt;data:post.title/&amp;gt;';

AddClipsId = '123456789ABCD';
AddClipsBcolor='#336699';
AddClipsNcolor='#528BC5';
AddClipsTcolor='#FFFFFF';
AddClipsType='0';
AddClipsVerticalAlign='middle';
AddClipsDefault='bookmark';
AddClipsTab = 'bookmark';
// --&amp;gt;
&amp;lt;/script&amp;gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot;
src=&amp;quot;http://js.addclips.org/v2/addclips.js&amp;quot;
charset=&amp;quot;utf-8&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;!-- AddClips Code END --&amp;gt;
実際にAddClipsボタンからブックマークしてみると、投稿記事のURLが取得できないというエラー。従い、エラーになったと思われるのは赤文字の部分のようです。この2行の一部はエンティティコードに変換してはいけなかったようです。

AddClipsUrl = &#39;<data:post.url/>&#39;;
AddClipsTitle = &#39;<data:post.title/>&#39;;

手順としてはAddClipsで生成したBlogger用のコードの記号をいったんエンティティコードに変換します。そして、上記のBlogger URLとTitleを抽出する変数部分の2行だけコピペして差し替えます。

私はHTMLエンティティ文字の変換にMicrosoft FrontPageを使っています。コードを貼り付けてそれをHTMLソースで見るとエンティティ文字に変換されています。こういったアプリケーションを使わなくてもエンティティ文字へ変換してくれる無料ツールが使えますのでご利用ください。Google Bloggerにコードを貼り付けるときは、エンティティ文字への変換が必須になります。

0 comments:

コメントを投稿