2014年9月27日土曜日

Bloggerのソーシャルボタンをカスタマイズする (ShareThis編)


ちょくちょくBloggerのレイアウトやガジェットを弄っているので
すが、今回はソーシャルボタンをちょっと弄ってみます。

ソーシャルボタンって?

ココです。


投稿の下、コメント欄の上にあるんですがめっちゃ地味です。
弄るといっても今のところBloggerでは表示or非表示しか選択
できないので、別のサービスを導入するしかありません。

という事でPart1はShareThisという海外のサービスです。
簡単に複数のボタンをまとめて設置できるのでとても便利!


http://www.sharethis.com

『Get the code』をクリックします。 


コードを貼り付けるサービス(今回はBlogger)を選択します。


表示されるタイプを選択します。


表示されるプレビューを見ながら並び替えや表示させるサー
ビスの追加/削除を行い、『Get the code』をクリックします。 


アカウントの取得が嫌なら、右端をクリックします。


できたコードをコピーします。

これで貼り付けるコードの準備ができました、簡単でしょ?


では続いて貼り付け作業、レイアウトからガジェットの追加を
選択し、HTML/JavaScriptをクリックします。


貼り付けて保存したら完了、ガジェットがどこにあってもいいよ
うですが、私はココに移動しました。


名前を付けなければ何も表示はされないのですが、ガジェッ
トの位置に1行空欄ができるのが気持ち悪いので・・・

こんな感じで各投稿の下に自動的に表示されます。



・・・標準のボタンが邪魔なので消しましょうか。
レイアウトで『ブログの投稿』を編集で開き、『共有ボタンを表
示する』のチェックを外します。



なくなりました。



と・こ・ろ・が・・・

トップページで投稿の一覧が表示されているのですが、そこの
投稿下にも表示されてしまいます。
(標準の共有ボタンが復活してるのは編集の都合です)


まぁ我慢できないほどじゃないんですが何となく不細工です。
もともと標準の共有ボタンも同じように表示されてたので特に
問題ないのですが、ボタンが目立つようになった為違和感が
大きくなったんでしょうね。

何とか消せないかなぁと調べていたら、ふりむけばコウホウ
(yuki saijoさん)というブログに参考になる投稿を発見しました。

LinkWithinがトップページにも表示されてしまう時のBlogger対処方法

対象となるサービスは違うのですが、何となく同じ方法ででき
そうな気がするので早速試してみました。


まずは、レイアウトで貼り付けたコードに名前を付けます。


一時的なものなのでなんでもいいですが、他のガジェットと違
う名前にします。


テンプレートから『HTMLの編集』をクリックします。


注:よくわからない人は先にテンプレートの画面右上でバックアップを取得しておく事をおススメします!

clrl+Fで検索窓を開き、さっき付けた名前(今回の場合は〝こ
こ〟)と入力しリターンを押すと目的の部分に飛びます。


左にある▼は畳んである印なのでクリックして広げます。


こんな風に2行追加します。


テキストで書くと、赤太字の部分をコピペで追加しています。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                                  <data:content/>
</b:if>


保存したら完了、トップページには表示されなくなりました。


特に不具合らしき問題も発生してないのでたぶんこの方法で
大丈夫だと思いますが、管理人は素人ですのでもし実行する
なら自己責任でお願いします・・・
なお、もしおかしくなったらさっき取得したバックアップを使って
元に戻す事ができますョ。


ブログ初心者のメモ帳は こちら です。


トップ画像:www.socialbookmarkingicons.com

0 件のコメント:

コメントを投稿

※1.コメントは管理人の承認後表示されます。
※2.何故かコメントに返信できません、ごめんなさい m(_ _;)m