簡単に始められるのは良いのですが、デフォルトで用意されている
拡張や改造がやや少ないという欠点があります。
他のブログなどで見掛ける、記事にTwitterやらFacebookに投稿出来るボタンを
自分も設置したいと思い、あれこれ試行錯誤したので、その結果を記録します。
０．簡単に設置したい。
自分でAPI調べるのなんて絶対嫌だし
なんか手軽で良いサービスないかな、と思ったら
往年、アクセス解析でお世話になったninjaツールズが
ボタン設置サービス提供していたので、こちらを使う事にしました。
ツイートボタン、いいねボタンなどをまとめて簡単設置｜忍者おまとめボタン
http://www.ninja.co.jp/omatome/
なので、予めninjaツールズへの登録を済ませておきます。
https://www.ninja.co.jp/register
１．ボタン表示コードを取得する
好きなボタンを選んで、表示用のコードを取得します。
画像を交えて簡単に
１－１．
http://www.ninja.co.jp/omatome/
まとめツールのページにアクセスします。
１－２．
「設置ボタンを１つずつ選択して作成」
Blogger を選択します。
１－４．
ボタンに表示させたいサービスをどんどん選んで行きます。
あんまり２０個も３０個も設置しても色気がないので
５～６個が良いんじゃないかと思います。
１－５．
もうこれでいいやと思ったら
右下の「プレビュー＆コードを取得する」を押します。
１－６．
コードが表示されますので、コピーしておきます。
メモ帳とかに残しておくと良いかも。
２．Blogger に張付ける
作業１でコードは取得出来ました。
次にこのコードをBloggerに埋め込みます。
２－１．
Blogger の編集画面を開きます。
左側に「テンプレート」の項目があるので選択します。
「ブログで使用中」の下の「HTMLの編集」を押します。
テンプレートが表示されます。
ごちゃごちゃと訳の解らん英数字が並びます。
一度、キーボードの「CTRL」 ＋「A」などで文字を全選択→コピーして
メモ帳などに張付けておく、バックアップ作業をしておく事を勧めます。
２－４．
落ち着いてフォームの文字をどこでも良いのでマウスで選択します。
キーボードの「CTRL」を押しながら「F」キーを押します。
すると、右上にSearchと書かれた「検索ボックス」が表示されます。
２－５．
<data:post.body/>
↑この文字をコピーして、「検索ボックス」に張付けて
キーボードの「Enter」キーを押して
テンプレートから <data:post.body/> を検索します。
何度か「Enter」キーを押すと解るのですが
テンプレートの中には <data:post.body/> が３箇所存在します。
左の数字を見ながら、先頭から２番目にある
<data:post.body/> を探し出します。
２－６．
この ２番目の <data:post.body/> の行の真下に
作業１で取得したコードを張付けます。
張付け前
張付け後
２－７．
張付けが完了したら、ページ上の「テンプレートを保存」を押します。
３．表示を確認する。
以上で設定は完了です。
ブログを開いて表示されるかを確認します。
このブログにも無事に表示されるようになりました。
その他．
なお上記で表示されるのはPC表示の記事のみです。
モバイルから見た画面で表示させるのは次の記事を参考に
Blogger のモバイル テンプレートを編集して SNS (Twitter や Facebook) 用の共有ボタンを携帯表示の記事にも設置してみる（簡易版）
http://yutcc.blogspot.jp/2013/12/blogger-SNS-Button-Mobile-iPhone.html
0 件のコメント :
コメントを投稿