Blogger のテンプレートを編集して SNS (Twitter や Facebook) 用の共有ボタンを設置してみる(簡易版)

Blogger(ブロガー )は、Google の提供するレンタルブログサービスでして
簡単に始められるのは良いのですが、デフォルトで用意されている
拡張や改造がやや少ないという欠点があります。

他のブログなどで見掛ける、記事にTwitterやらFacebookに投稿出来るボタンを
自分も設置したいと思い、あれこれ試行錯誤したので、その結果を記録します。

0.簡単に設置したい。
 自分でAPI調べるのなんて絶対嫌だし
 なんか手軽で良いサービスないかな、と思ったら
 往年、アクセス解析でお世話になったninjaツールズが
 ボタン設置サービス提供していたので、こちらを使う事にしました。

 ツイートボタン、いいねボタンなどをまとめて簡単設置|忍者おまとめボタン
 http://www.ninja.co.jp/omatome/

 なので、予めninjaツールズへの登録を済ませておきます。
 https://www.ninja.co.jp/register

1.ボタン表示コードを取得する

 好きなボタンを選んで、表示用のコードを取得します。
 画像を交えて簡単に

 1-1.
  http://www.ninja.co.jp/omatome/
  まとめツールのページにアクセスします。

 1-2.
  「設置ボタンを1つずつ選択して作成」

1-3.
  Blogger を選択します。
 

 1-4.
  ボタンに表示させたいサービスをどんどん選んで行きます。
  あんまり20個も30個も設置しても色気がないので
  5~6個が良いんじゃないかと思います。
  

  1-5.
  もうこれでいいやと思ったら
  右下の「プレビュー&コードを取得する」を押します。

 

  
 1-6.
  コードが表示されますので、コピーしておきます。
  メモ帳とかに残しておくと良いかも。




2.Blogger に張付ける
 作業1でコードは取得出来ました。
 次にこのコードをBloggerに埋め込みます。 

 2-1.
  Blogger の編集画面を開きます。
  左側に「テンプレート」の項目があるので選択します。

2-2.
  「ブログで使用中」の下の「HTMLの編集」を押します。

2-3.
  テンプレートが表示されます。
  ごちゃごちゃと訳の解らん英数字が並びます。

  一度、キーボードの「CTRL」 +「A」などで文字を全選択→コピーして
  メモ帳などに張付けておく、バックアップ作業をしておく事を勧めます。


  2-4.
  落ち着いてフォームの文字をどこでも良いのでマウスで選択します。
  キーボードの「CTRL」を押しながら「F」キーを押します。

  すると、右上にSearchと書かれた「検索ボックス」が表示されます。




  2-5.
  <data:post.body/>
  ↑この文字をコピーして、「検索ボックス」に張付けて
  キーボードの「Enter」キーを押して
  テンプレートから <data:post.body/> を検索します。

  何度か「Enter」キーを押すと解るのですが
  テンプレートの中には <data:post.body/> が3箇所存在します。

  左の数字を見ながら、先頭から2番目にある
   <data:post.body/>  を探し出します。


   2-6.
   この 2番目の <data:post.body/> の行の真下に
   作業1で取得したコードを張付けます。


張付け前

張付け後

  2-7.
   張付けが完了したら、ページ上の「テンプレートを保存」を押します。

3.表示を確認する。

  以上で設定は完了です。
  ブログを開いて表示されるかを確認します。


  このブログにも無事に表示されるようになりました。

その他.
 なお上記で表示されるのはPC表示の記事のみです。
 モバイルから見た画面で表示させるのは次の記事を参考に
 
 Blogger のモバイル テンプレートを編集して SNS (Twitter や  Facebook) 用の共有ボタンを携帯表示の記事にも設置してみる(簡易版)
 http://yutcc.blogspot.jp/2013/12/blogger-SNS-Button-Mobile-iPhone.html

スポンサードリンク

0 件のコメント :

コメントを投稿