ブログに「いいね。」だけでなく「シェア」ボタンも設置してしまおう。

• コピーしました

Facebookのシェアボタンの設置
があっけないくらい簡単だった。

 

「えーっと、いいねとシェアボタン?」 

 

どうも。

アジア英語マイスター副業術師"ごま"です。 
今日も英語の勉強しながら副業に打ち込みます。

 

応援していただけると励みになります。

 

初心者・お小遣い稼ぎ ブログランキングへ

 

 

ブログにfacebookのボタンを設置しよう!

 

今日の記事を読むことであなたは
ブログに「いいね」と「シェア」
ボタンを簡単に設置できます。　

　
準備はいいかい?? 
Are you ready? 
　
OK! 
　
では、行きましょう!! 
Here we go !! 
　
　
ブログを更新したら、facebookに
更新のお知らせをしたい。　

 

そして、

 

facebook でシェアして欲しい。

 

 

知らせたいサイトのURLをべた張
りすればいいけど、OGPとやらの
設定ができていないと

「いいね数がカウントされない。」

 

らしい。

 

それなら、直貼りではなく自サイ
トのシェアボタンからリンクしよ
うと思う。

 

最近のテンプレートはとてもきれ
いでデザインがいい。

 

でも、このテンプレートの初期設
定ではシェアボタンがない。

(ものが多い。)

 

↑こんな感じ。

 

だから、シェアボタンをつけてみた。

 

調べたりしてみたけど、結果として
は、以外なほど簡単だった。

 

シェアボタンの設置方法。
その方法とは?　

 

テンプレートのどこを変えるの?

最近のテンプレートは、初期状態で、

 

• トップページ
• 個別投稿 
• 個別ページ (固定ページ)

テーマの中に↑こんな感じの

 

“index.php"

 

と言う名前のテンプレートを探そう。　

インデックスページと言われる
テンプレートだ。 

 

 

ステップ2: コードを変更してみよう!

"Facebook Button”とか
“data-share”

 

で検索してみると、
こんなコードがある↓。

 <!-- Facebook Button -->

 <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="box_count" data-action="like" data-show-faces="false"

 

data-share="true">

 

</div> <div id="fb-root"></div> <span style="height:20px;"><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)⁰; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=305618339584509"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script></span> </li> <?php } ?> <?php if($socialbtn_fb=='socialbtn_fb-off'){ ?> <?php } ?>

 

このdata-share=“false”を

data-share=“true">

に変えてみよう。
“true”は表示すると言う意味だ。

 

テンプレートを保存・更新する。
そして、実際のサイトを見ていると

 

 

↑こんな風になっているはずだ。

 

ステップ3: 個別記事と個別ページのテンプレートも同じように変えてみよう! 

テンプレート名は、

 

“page.php”

とか

“single.php"

 

で、投稿とか個別ページという
名称になってますね。

 

テンプレートのコードは、同じ
テーマ内ならみな同じだ。

 

同じように変えてみよう。

 

 

あとがき

テンプレートによっては、コード
の書き方が異なるものがあると思
うけど、ほとんどは同じだと思う。

 

facebook for developersのサイト
でコードの例があるので、検索
してみてくださいね。

 

 

下記のサイトを参考にさせていただいてます。

 

facebook for developers

 https://developers.facebook.com/docs/plugins/like-button

 

このサイトの”いいね!ボタン構成ツール"で
レイアウトを”box_count”

 

にすると、今回紹介しているボタ
ンが表示できるよ。 

 

今すぐ、ステップ1をやろう!

 

ステップ1: まずは、トップページのテンプレートを探す!

からやってみよう!! 

 

 

Let's challenge!! 
　
では。 
See you next time!!

 

 

初心者・お小遣い稼ぎ ブログランキングへ

• コピーしました