A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

facebookページのいいね!を増やすために記事下にPage Pluginを設置する方法【stinger5】

   

費用:0円 時間:10分

このサイトのfacebookページをちょっと前に作成して、サイドバーに設置して、数か月。

いいね!をしてくれたのは、俺が現実で直接頼んだ友人だけです( ;∀;)

……。まあ、わかってますよ、いいね!するほどのサイトじゃないことは…(-。-)y-゜゜゜。

でもね、俺としてはいいね!をしてもらいたいわけですよ。

サイトの更新情報がfacebook上で通知されるし、役に立つんじゃないかなっておもったり、いいね!してくれたら俺がうれしいと言いますか…、

 

まあ、そんなfacebookのいいね!が確実に少ないこのページですが、少しでも増やすために手段をいろいろ探しました。

すると、見つかりましたよ。

facebookのいいね!が多いサイト共通点として、サイドバーだけじゃなくて記事の下にもfacebookのPage Plugin(良いねするためプラグイン)が設置してあるじゃないですか!

ということで、stinger5のこのサイトでも記事下にPage Pluginを設置してみたいと思います。

sponsored link

記事下に設置する方法

今回は、記事下といっても記事下のSNSボタンのエリアの下にpage pluginとメッセージ(いいね!を要望する)を設置しましょう。

といっても、私は初期型のstinger5を色々とカスタマイズしておりまして、SNSボタンのエリアも御多分に漏れすカスタマイズしております。

現在のSNSボタンに変える方法は以下の記事にから。

stinger5のSNSボタンを増やして、おしゃれなデザインに変える方法
費用:0円 時間:15分 stinger5を使っていると、改善したいのが、SNSボタンの数とおしゃ...

ということで、そのコード変更を前提として解説します。結構簡単ですよ。

Page Pluginのコードを作成

まず、Page Pluginのコードを作成しておきましょう。

それについては以前記事を書いているので、ご参考に。

facebookページのpage pluginのstinger5サイト設置方法!いいねのためのリンクです!2015年12月17日現在
費用:0円 時間:10分 facebookでページを作成した!なら次にやらなくてはいけないのは、サ...

sns.phpを編集

wordpress管理画面>>外観>>テーマ編集にて sns.phpを編集しましょう。

コードはスマホ版とPC版になっていると思います。そのどちらともを編集しましょう。基本的に、スマホとPCでsns.phpにおいての違いはデバイス判別のコードが入っているかどうかなので、あまり気にせず。

基本的な構造としては、

<div class="share">
<div class="sns">
<ul class="clearfix">
<li>SNSのコード</li> //6つのSNSボタンごとのコードが書かれている
</ul>
</div>
</div>

 

となっています。

この場合、<ul></ul>の中に、Page Pluginを入れてしまうと、SNSボタンと同様に横並びにされてしまいます。サイズの関係上無理なので結果的にデザインが崩れてしまいます。

ということで、</ul></div>の間にメッセージPage Pluginを入れましょう。こうすると、CSSはSNSボタンのエリア全体と同様になります。だから、変な挙動がなくなります。

なので、以下のように編集しましょう。

</ul>
<div class="fb-reco">Facebookで最新情報を購読できます!</div> //メッセージです。div内の言葉書き換えておk
ここにfacebookのPage Pluginのコードをコピペ
</div> // class="sns"のdiv閉じタグ
</div> //class="share"のdiv閉じタグ

style.cssを編集

次にスタイルを編集していきましょう。

wordpress管理画面>>外観>>テーマの編集 style.cssを編集しましょう。

これは個人個人の好みなのですが、以下のコードを最後にコピペしましょう。

.fb-page{
 padding:24px 0 30px 0;
 height: 130px; //pcでのPage Pluginの高さ
}
.fb-reco{
 background-color:#ff4500; //メッセージの背景色
 color:#ffffff; //メッセージの文字色
 padding:10px 0; 
 font-size: 20px;
 margin:20px 0;
}

とすると、たぶんこんな感じになると思いますよ(^^)/

facebook

 

設置してから、2日。

まだ当サイトでは増えてませんが(´・ω・`)

設置してみてはいかがでしょうか?

 - サイト作成, プログラミング, SNS

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事