記事下など好きな所にSNSボタンを設置する方法

記事下など好きな所にSNSボタンを設置する方法

先日、本ブログのことがちょろっと書かれているYahoo! 知恵袋を発見。どうやらFacebookのいいね!ボタンを設置するのに本ブログを参考にしたが、どこに張り付けていいか分からないとのこと。(現在その質問は削除されています)

「誰が見ても分かりやすいブログ」をモットーに記事を書いていたつもりが、大切な部分を端折っておりました。申し訳ありませぬ。

そこで今回は記事上、記事下、サイドバーなど好きな所にSNSボタンを設置する方法をご紹介:)

SPONSORED LINK

記事の上にSNSボタンを設置する方法

「テンプレート」-「HTML の編集」をクリック

Blogger管理画面より「テンプレート」→「HTML の編集」をクリック。

ソースの中から<div class='post-header-line-1'/>を探します。

探し方が分からない方はこちらの記事を参考にどうぞ。

以前の記事:カスタマイズ初級編!HTMLを編集する方法

いくつか見つかるので、それぞれの下にSNSボタン用のコードを張り付けます。

ただし、このままだとトップページと記事ページ両方に表示されてしまうので、記事ページだけ表示したければ張り付けたコードをこんな感じで囲います。

<b:if cond='data:blog.pageType == "item"'>
張り付けたコード
</b:if>

トップページだけ表示したい場合はこんな感じ。

<b:if cond='data:blog.pageType == "index"'>
張り付けたコード
</b:if>

「テンプレートを保存」をクリック

最後に「テンプレートを保存」をクリックして完了:)

記事の下にSNSボタンを設置する方法

「テンプレート」-「HTML の編集」をクリック

Blogger管理画面より「テンプレート」→「HTML の編集」をクリック。

ソースの中から<data:post.body/>を探します。

探し方が分からない方はこちらの記事を参考にどうぞ。

以前の記事:カスタマイズ初級編!HTMLを編集する方法

いくつか見つかるので、それぞれの下にSNSボタン用のコードを張り付けます。

ただし、このままだとトップページと記事ページ両方に表示されてしまうので、記事ページだけ表示したければ張り付けたコードをこんな感じで囲います。

<b:if cond='data:blog.pageType == "item"'>
張り付けたコード
</b:if>

トップページだけ表示したい場合はこんな感じ。

<b:if cond='data:blog.pageType == "index"'>
張り付けたコード
</b:if>

「テンプレートを保存」をクリック

最後に「テンプレートを保存」をクリックして完了:)

サイドバーにSNSボタンを設置する方法

「ガジェットを追加」をクリック

Blogger管理画面より「レイアウト」→サイドバー一番上の「ガジェットを追加」をクリック。

「HTML/JavaScript」をクリック

一覧から「HTML/JavaScript」をクリック。

「HTML/JavaScript の設定」画面に設定をする!

ここに細かい設定をしていきます。

タイトル

SNSボタンの上に表示する文字を入力します。

何も表示しない場合は空のままでOKです。

コンテンツ
入力エリアの右上が「リッチテキスト形式」となっている状態で、SNSボタン用のコードを張り付けます。

最後に「保存」をクリックし完了!

表示位置を変更するにはドラッグ

表示位置を変更したい場合は「レイアウト」画面でガジェットを上下にドラッグして位置を変更し、最後に「配置を保存」をクリックすればOK。

…with the ';' delimiter.ってエラーの対処法

XML の解析中にエラーが発生しました。行 1926、列 115: The reference to entity "width" must end with the ';' delimiter.

保存時にこんな感じのエラーが表示された場合の対処法もご紹介。

この手のエラーは張り付けたコードの中に「&」が含まれていることが原因です。

上の例だと「width」という文字の付近に「&」があります。

....FacebookDevelopers&width=600....

対処方法は「&」という文字を

....FacebookDevelopers&amp;width=600....

「&amp;」と置き換えればOK。

....FacebookDevelopers&width=600&height=290....

複数「&」があった場合は

....FacebookDevelopers&amp;width=600&amp;height=290....

すべて「&amp;」に置き換えます。

あとはいつも通りテンプレートを保存すればOK。

まとめ

というわけで記事上、記事下、サイドバーなど好きな所にSNSボタンを設置する方法のご紹介でした。

これからも「誰が見ても分かりやすいブログ」をモットーに、より一層精進してまいります:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)