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

目安時間:約 7分
  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

今日の副業術、話題はこんな感じ!!

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

 

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

 

Fbshare 01

↑こんな風にしたい。
 
 

どうも。

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

 

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

 


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

 

 

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

 

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

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

 

そして、

 

facebook でシェアして欲しい。

 

 

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

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

 

らしい。

 

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

 

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

 

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

(ものが多い。)

 

Fbshare 02

↑こんな感じ。

 

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

 

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

 

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

 

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

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

 

  • トップページ
  • 個別投稿 
  • 個別ページ (固定ページ)
 
などにSNS関係のボタンがありますね。
このサイトでは、
 
アンリミテッドアフィリエイト
Neoというテンプレートを使って
ます。
 
でも、テンプレートのコードは
大体同じだ。
試してみよう!!
 
 

facebookのボタンを設置する3ステップ

 
次の3ステップであなたは、
いいね!とシェアボタンを設置で
きます。
 

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

Fashare 03

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

 

“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)0; 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”は表示すると言う意味だ。

 

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

 

 

Fbshare 01

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

 

ステップ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!!

 

 


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

  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

この記事に関連する記事一覧

コメントは2件です

  1. 平松 より:

    お久しぶり~。
    今日は、こちらからコメントさせてもらいます。
    ところでやはり「アンリミテッドアフィリエイト」のような教材は使ったの?
    私もブログ開設はしているけどアクセスが乏しい・・・
    何が問題なんだろう???

    • goma より:

      平松さん
      お久しぶりです。
      コメントありがとうございます。

      はい。アンリミテッドアフィリエイト
      ノウハウの一部を使ってアクセスや
      「いいね!」アップを試しています。

      教材には、facebookやtwitterなどのSNSから
      アクセスや集客をする方法が書いてありますね。

      そのやり方をそのまま実践しています。
      英語ブログなんかはアクセスや「いいね!」が
      増えて来ましたね。

      うれしいですよ。

コメントフォーム

名前

メールアドレス

URL

コメント

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

サイト管理人プロフィール
goma

管理人:ごま

全く知識なし・技術なし・四十路のサラリーマン。英語圏を旅したいがために旅費を稼ぐためインターネットビジネスの世界に飛び込んだ。副業でブログアフィリエイトを開始

詳しいプロフィールはこちら

副業術カテゴリ
ごまのサイト

ページの先頭へ