2012/07/26

Bloggerに自動でソーシャルボタンを配置する方法


今回はBloggerにソーシャルボタンを自動で配置する方法を紹介したいと思います。

私は今までFace Book、Twitter、はてなブックマークのソーシャルボタンを全てブログの記事を書くたびにコードを取得して貼付けて配置していました。

これでは物凄く手間がかかっちゃいますよね.....

WordPressはプラグインが豊富なのでソーシャルボタンの自動配置などは簡単に出来るのですが、Bloggerは探してもその手の情報が見つからず....

色々探して見つけたのがこのサイト(ツール)*無料会員登録必要です
忍者ツールズ(公式サイト)


忍者おまとめボタントップにアクセスするとあらかじめソーシャルボタンのセットがあります。



テンプレートをそのまま利用するのも良いのですが、中には必要の無いソーシャルボタンも含まれています。
そんな時は「設置するボタンを1つずつ選択して作成」を押して自分で好きなソーシャルボタンだけを配置する事ができます。

手順

今回はBloggerに設置するのでBloggerを選択





①自分が設置したいソーシャルボタンを選ぶ
②選んだ順番でソーシャルボタンが並ぶのでドラッグで配置を変更する事が出来る
③ボタンの選択、配置移動が終わったらコードを取得する
④コードをコピーしたらBloggerに貼付けて完了!


コピーしたコードの貼付け方法(Blogger編)

*各ブログサービスのコード貼付けQ&Aはコチラ

Bloggerの管理画面から「テンプレート」を選択

「HTMLの編集」を選択


「続行」を押す

「ウィジェットのテンプレートを展開」にチェック


「div class=’post-footer’」の文字を検索
*検索方法:Ctl+Fかブラウザの編集メニュー → 検索で検索できます。

div class=’post-footer’の下に先ほどコピーしたタグを貼付けて保存したら完了です。

*div class=’post-footer’のタグが2つ見つかった場合は上のdiv class=’post-footer’の直下に貼付けて下さい。


これで各記事に自動的にソーシャルボタンが配置されます。


今後自動的にソーシャルボタンが配置されると思うと嬉しいです。(過去の記事にも今回の設定が反映されています。)

Bloggerユーザーの方はお試しあれ!!


0 件のコメント:

コメントを投稿

他の記事紹介

Related Posts Plugin for WordPress, Blogger...