bloggerのシェアボタン設置〜便利で簡単!5分で設定〜

スポンサーリンク

シェアしてねぇ〜

どうも整備士です。

今まで当ブログの記事をシェアしていただけたらと1記事1記事はてなブックマークのボタンを設置していました。(全然ブクマしていただいてないのにあれなんですが囧rz)

 

はっきり言って面倒くさい。

 

記事をアップしたと同時にシェアボタンできたらなぁと色々調べてみるとあるではないですか!ということで簡単にシェアボタンを設置する方法をば。

 

ちなみにbloggerでの手順です。

 

忍者ツールズを使う

 

忍者ツールズというサイトにアクセスし、ユーザーアカウントを作成します。

 

 

ログインし、忍者おまとめボタンをクリックします。12種類ほどボタンのスタイルを選べるので自分の好きなスタイルを選択し、選択したセットで作成をクリックします。

 

設置するウェブサイトを選んでくださいと出るので、自分のブログを選びます。

 

 

自分はbloggerなんでbloggerを選択。

 

続いてボタンを選ぶと出てきますのでデザイン、サービスを選んでいきます。プレビューが下に出ているので確認しながらカスタマイズします。カスタマイズが済んだら右下の黒い部分。プレビュー&コードを取得するをクリック。するとコードが作成されます!

 

これでブログに埋め込むコードの完成です。

 

なお一度作ったコードは忍者ツールズに保存されるのでいつでもすぐ再取得等できます。

 

コードを埋め込む

 

続いてブログに上記のコードを埋め込みます。まずは、bloggerのマイブログのテンプレートをクリックし、最初にバックアップを取っておきます。HTMLをいじるのでもし万が一おかしくなった時に戻せるようにしておきます。バックアップを取ったら、HTMLの編集をクリックします。

するとテンプレートのコードが現れます。

このコードの中「data:post.body」を探します。まず枠の中をクリックして、Cntl+f(Macちゃんはcommand+f)を押すと検索窓が出てきます。そこにdata:post.bodyを打ちリターンキーを押すと出てきます。自分のブログで使用しているテンプレートではdata:post.bodyは幾つかあります。2つめがPC用のページの記事本文で、この下に忍者ツールズでコピーしたコードを埋め込みました。

 

 

その後テンプレートを保存して、自分のブログを確認します。すると・・・

 

 

やったー!!!大成功ですε-(´∀`; )

 

 

まとめ

これで記事の本文に毎回コード埋め込む必要なくなったし、はてな以外のボタンも設置できました!!!

めっちゃ嬉しすw

コードを取得するところまではblogger以外のブログでも同じ手順です。その先は自分は分からないんでGoogle先生にお問い合わせを。みなさん挑戦してみてください!!!

スポンサーリンク