アメブロ新デザイン「メッセージを送る」「Facebookの友達になる」ボタン追加

この記事は2016/3/8以降使えるようになったアメブロの新しいCSS編集用デザインのカスタマイズ方法について書いています。

※プロフィール画像が丸いタイプ

新デザインになったのは良いけれど、ボタンがなくなった部分があります。

アメンバーになる
メッセージを送る
ピグともになる

がなくなり、

読者になる

だけとなっている。

正直、アメンバーになる、ピグともになるは私的にはどちらでもでもいい。。。

できたら、メッセージを送るくらいは必要なのかな?って思います。っということで、メッセージを送るともう一つFacebookの友達になるボタンを追加する方法をお伝えしたいと思います。

メッセージを送る&Facebookの友達になるボタンの設置

■設置場所:フリープラグイン

下記のコードをフリープラグインにコピペしてください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$("#profile p.skin-widgetButton").append('<p amb-component="readersButton" class="skin-widgetButton" style="padding-top:1px;"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=アメブロID" amb-component="button" class="skin-btnSidePrimary"><span style="padding:1px; background:url(https://emoji.ameba.jp/img/user/mo/mon-mon-ayu/976223.gif); background-repeat:no-repeat;"><span style="padding-left:20px;">メッセージを送る</span></span></a></p><p amb-component="readersButton" class="skin-widgetButton" style="padding-top:1px;"><a href="https://www.facebook.com/Facebook ID" target="_blank" amb-component="button" class="skin-btnSidePrimary"><span style="padding:1px; background:url(https://emoji.ameba.jp/img/user/ch/chrysogenum/3748377.gif); background-repeat:no-repeat;"><span style="padding-left:20px;">友達になる</span></span></a></p>');
});
</script>

アメブロIDにあなたのID(IDのみ)を入れてください
FacebookIDにあなたの個人アカウントのトップページのURLを入れてください。

以上で設置できちゃいます。

えっ!?もう終わり?って感じでしょ?

是非やってみてくださいね。

まとめ

アメブロ新デザインでは、メッセージを送るボタンがなく、読者が送りたいって思った時にプロフィールまで見に行く必要があります。ひとつでも手間が増えると人はやらなくなる確率が上がってしまうので、この設置をおすすめしています。またFacebookの友達になるボタンに関しては、基本リンクを貼っているだけなので、私のお客様の中にはFacebookページにされる方もいました。

 

宜しければ、Facebookページに『いいね!』をお願いします

20170423 大阪・あべの
ママでも1日でホームページが作れちゃう講座

~WordPressでシンプル可愛いサイトを作っちゃおう~

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。