サイドバーのプロフィール欄にFacebookのボタンを付けたいんですけど | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!
PCインストラクターの川上雄大です。


※2018年3月現在、アメブロのフリープラグインで、この記事に書いていることはできなくなっております。

後ほど、この記事を削除いたします。


================================

さっ!
いつも早々とコメントをこまめにいただく方から
「サイドバーのプロフィール欄にFacebookのボタンを付けたいんですけど」

とのご質問がありましたので、記事にいたします。

まず、サイドバーのプロフィール欄は普通どうなっているのかというと・・・

川上雄大のワンポイントレッスン

↑このようなボタン「読者になる」「アメンバーになる」「メッセージを送る」「ピグともになる」になっていますね。

それを・・・
「ピグともになる」の代わりに「Facebookに申請」ボタンを置きたい、ということなのですね。

川上雄大のワンポイントレッスン

はい、それではいきましょう!

まず、フリープラグインで次↓のスクリプトをコピー&ペーストしてください。
(スクリプトって?という方は過去記事『記事やコメントを読んだ後に『読者になる』を見せるには』をご覧ください^^)
 

<!-- プロフィールにFBボタン-->
<script>
$(function(){
$(".profileBtnArea").append('<li class="fbreg"><a class="skinImgBtnS" style="color:#000000; text-decoration:none;" href="https://www.facebook.com/自分のID" target="_blank"><font style="font-weight:bold; color:#ffffff; background:#3b5998; line-height:2.4;">F</font> Facebookに申請</a></li>');
});
</script>

 


注意)
↑上のスクリプト内の「自分のID」はFacebookのIDを入力してください。
アメブロのIDでないのでご注意を!


[保存]をクリックすると、まずこのように↓「Facebookに申請」ボタンが表示されます。

川上雄大のワンポイントレッスン

そして、今度は「ピグともになる」ボタンを消しますので、

CSS編集の一番最後に次のコードをコピー&ペーストしてください。

 

 

 

/* 「ピグともになる」を消す  */
.profileBtnArea .presentBtn{
display:none !important;
}

 


[保存]を押すと、このように↓なります。

川上雄大のワンポイントレッスン

「Facebookに申請」ボタンをクリックして、きちんと自分のところに飛ぶかチェックしてみてくださいね!

川上雄大のFacebook 
(↑の画像を間違ってクリックすると、私のFacebookが開きますので、ご注意ください^^!間違ってクリックされた方もそのまま無意識に友達申請していただけるとありがたいです^^)




以上、ワンポイントレッスンでした。

 

 

 


LIDS澄川・ライフデザインスクール
川上 雄大