はいどうも、ご無沙汰ご無沙汰。
今日は
「Google Bloggerの記事の下にSNSシェアボタンをつける方法」
を紹介。
つまりこうゆうこと
このTwitterとFacebookのシェアボタンです。
これをブログの最後につけてそのまま読み終わったらシェアしやすいようにって寸法です。
参考にした記事はこちら
http://www.blogger-customize.com/2014/04/layout-anywhere.html
この方のブログ参考になりましたが２０１４年の記事ですし途中わからないことがあり
調べたりしたので改めて分かりやすく紹介したいと思います。
作業の流れはこんな感じ
１｜FacebookとTwitterからコードをもらう
２｜Bloggerのテンプレートに挿入
３｜トラブルを解決して終わり
では参りましょう。
Google先生が提供しているBloggerというブログはなんとSNSボタンがわかりにくいったらありゃしないんです。
ブログのいろんなところにこんなマークがあります。
これを押すとズラっとSNSのシェアボタンが出て来ます。
一応これでシェアはできるんですが正直これを押す人いる？
ってなわけでもっと押しやすいようにしようと思います。
HTMLいじったら大変じゃない？大丈夫って思ってる方は私もそう思ってたら大丈夫！
難しいことは考えずにとりあえず後で使うからFacebookとTwitterからコードをもらいましょう。
とりあえずパソコンのテキストを開きましょう。ここにメモして後でHTMLに入れます。
Facebook
https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP
このURLにアクセスしてコードを取得。
シェアするURLに自分のブログのURLを入れる。
レイアウトとかボタンサイズは自分がいいと思うやつを。プレビューが表示されます。
いいと思ったら「コードを取得」をクリック。
ここでこうなります。
JavaScript SDK と IFrameがあるのでIFrameをクリック。
そうするとこう出て来ますのでこのコードをコピーしてテキストに貼り付けておきましょう。
次にTwitter
下記のURLにアクセス
https://publish.twitter.com/#
こんな画面なんで右のTwitterボタンをクリック
そうするとボタンを選べるので自分が欲しいボタンをクリック
そうするとこんな画面になるからコードをコピーするをクリック
コピーしたコードをテキストに貼っておきましょう。
Bliggerのブログを各ページの左に一覧があります。
こちらの「テーマ」→「HTMLの編集」を押します。
そうするとHTMLの文字列がズラーっと出て来ます。
文字列を一度クリック。そしてコントロールFを押すと検索窓が出て来ます。
そこの検索窓に
<data:post.body/>
と入力してエンター。
黄色く<data:post.body/>と出て来ますのでその下に
<b:if cond='data:blog.pageType == "item"'>
○○○○○○
</b:if>
と入力。
○○のところに先ほどコピーしたFacebookとTwitterのコードを入力します。
こんな感じ。
入力したらテーマを保存を押します。
そうすると案の定エラーがでるかと思います。
XML の解析中にエラーが発生しました。行 1926、列 115: The reference to entity "width" must end with the ';' delimiter.
とか言われると思います。
基本的にFacebookからもらって来たコードにエラーが出ます。
これはコードの「＆」のマークがエラー対象になるらしいので全部
「＆amp;」に置き換えるとOKです。
これで保存したらもう完成です。
お疲れ様でした。
それとFacebookもTwitterもさっきのURLにアクセスすると他のボタンとかももらってこれるのでそれを差し替えたらいけます。
Twitterならフォローボタンとかいいねボタンとか。
Facebookも別のページですがシェア以外にもあります。
もちろんFacebook、Twitter以外もきっともらってこれるはずです。Googleシェアとかはてなブログシェアとか。
私はとりあえずFacebookTwitterが大事だと思ったからこの二つだけやってます。
いや〜今日はなんて有意義なブログを書いたんだろうか。
お疲れ様でした！
今日は
「Google Bloggerの記事の下にSNSシェアボタンをつける方法」
を紹介。
つまりこうゆうこと
このTwitterとFacebookのシェアボタンです。
これをブログの最後につけてそのまま読み終わったらシェアしやすいようにって寸法です。
参考にした記事はこちら
http://www.blogger-customize.com/2014/04/layout-anywhere.html
この方のブログ参考になりましたが２０１４年の記事ですし途中わからないことがあり
調べたりしたので改めて分かりやすく紹介したいと思います。
作業の流れはこんな感じ
１｜FacebookとTwitterからコードをもらう
２｜Bloggerのテンプレートに挿入
３｜トラブルを解決して終わり
では参りましょう。
１｜はじめに
はてなブログとかアメブロとか有名どころは勝手にSNSのシェアボタンがついて来ますがGoogle先生が提供しているBloggerというブログはなんとSNSボタンがわかりにくいったらありゃしないんです。
ブログのいろんなところにこんなマークがあります。
これを押すとズラっとSNSのシェアボタンが出て来ます。
一応これでシェアはできるんですが正直これを押す人いる？
ってなわけでもっと押しやすいようにしようと思います。
２｜FacebookとTwitterからコードをもらう
今回BloggerのテンプレートのHTMLをいじってシェアボタンを差し込みます。HTMLいじったら大変じゃない？大丈夫って思ってる方は私もそう思ってたら大丈夫！
難しいことは考えずにとりあえず後で使うからFacebookとTwitterからコードをもらいましょう。
とりあえずパソコンのテキストを開きましょう。ここにメモして後でHTMLに入れます。
https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP
このURLにアクセスしてコードを取得。
シェアするURLに自分のブログのURLを入れる。
レイアウトとかボタンサイズは自分がいいと思うやつを。プレビューが表示されます。
いいと思ったら「コードを取得」をクリック。
ここでこうなります。
JavaScript SDK と IFrameがあるのでIFrameをクリック。
そうするとこう出て来ますのでこのコードをコピーしてテキストに貼り付けておきましょう。
次にTwitter
下記のURLにアクセス
https://publish.twitter.com/#
こんな画面なんで右のTwitterボタンをクリック
そうするとボタンを選べるので自分が欲しいボタンをクリック
そうするとこんな画面になるからコードをコピーするをクリック
コピーしたコードをテキストに貼っておきましょう。
３｜ブログのHTMLに入力する
ブログのHTMLに差込に移りましょう。Bliggerのブログを各ページの左に一覧があります。
こちらの「テーマ」→「HTMLの編集」を押します。
そうするとHTMLの文字列がズラーっと出て来ます。
文字列を一度クリック。そしてコントロールFを押すと検索窓が出て来ます。
そこの検索窓に
<data:post.body/>
と入力してエンター。
黄色く<data:post.body/>と出て来ますのでその下に
<b:if cond='data:blog.pageType == "item"'>
○○○○○○
</b:if>
と入力。
○○のところに先ほどコピーしたFacebookとTwitterのコードを入力します。
こんな感じ。
入力したらテーマを保存を押します。
そうすると案の定エラーがでるかと思います。
XML の解析中にエラーが発生しました。行 1926、列 115: The reference to entity "width" must end with the ';' delimiter.
とか言われると思います。
基本的にFacebookからもらって来たコードにエラーが出ます。
これはコードの「＆」のマークがエラー対象になるらしいので全部
「＆amp;」に置き換えるとOKです。
これで保存したらもう完成です。
お疲れ様でした。
４｜最後に
え〜そんな感じで解決できなかったら申し訳ないですけど最初にあげたかたのブログを参考にしたり私にコメントくれたりしてください。それとFacebookもTwitterもさっきのURLにアクセスすると他のボタンとかももらってこれるのでそれを差し替えたらいけます。
Twitterならフォローボタンとかいいねボタンとか。
Facebookも別のページですがシェア以外にもあります。
もちろんFacebook、Twitter以外もきっともらってこれるはずです。Googleシェアとかはてなブログシェアとか。
私はとりあえずFacebookTwitterが大事だと思ったからこの二つだけやってます。
いや〜今日はなんて有意義なブログを書いたんだろうか。
お疲れ様でした！
コメント
コメントを投稿