標準の「いいね!」「ツイート」ボタンを目立たせ、他のSNSボタンも増やしちゃおう

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

標準の「いいね!」「ツイート」ボタンを目立たせ、他のSNSボタンも増やしちゃおう

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

シリウスには「いいね」と「ツイート」ボタンが簡単に設置できる機能が標準で付いてますね。

 

標準のボタンはこんな↓感じです。

 

キャプチャ画像

 

パッと見、どうですか?
そんなに目立ってもいませんよね。

 

しかも標準でつけられるのは「いいね!」「ツイート」ボタンの 2つだけです。

せめて「はてなブックマーク」「Google+」なんかも欲しいところじゃないですか。

 

はやりに乗っかって「LINEで送る」もつけちゃいましょうか。

 

実はもう一つ”問題”があります。

 

といっても現段階では確実に起こりうる問題というわけでもないんですが、
シリウスの「いいね!」ボタンが将来的には機能しなくなる可能性があるってことです。

 

要はシリウスで自動生成されるコードの中身の問題なんですが、
Facebookの新しい仕様に合わせた書き換えが必要になってくるかもしれないんです。

 

詳しくはコチラをご覧ください。(←といって見たところでよくわかんないと思いますが...)

 

そんなこんなで、
いっそのこと Facebookの新仕様に合わせた「いいね!」ボタンを新たに作っちゃおうかなというのが今回のカスタマイズの始まりです。

 

ついでにボタンそのものももう少し目立たせて、
他の SNS関連ボタンも付け加えてにぎやかにしちゃいましょう。

 

どうせならいっぱい拡散してほしいですものね。

実装

目次

  • 実装
    • 「ツイート」ボタン
    • 「いいね!」ボタン
    • 「Google+1」ボタン
    • 「はてブ」ボタン
    • 「Pocket」ボタン
    • 「LINEで送る」ボタン
    • 仕上げ
    • レイアウト調整
  • どこに表示させる?
    • HTMLテンプレートに書く場合
    • 投稿記事内に直接書く場合
  • レスポンシブテンプレートでのCSS設定

 

元々のSNS関連ボタンはこちら↓。

 

キャプチャ画像

 

そして改良版はこちら↓になります。

 

キャプチャ画像

 

一つ一つのアイコンを大きくして、
新たに「Pocket(あとで読む機能)」「はてブ」
はやりの「LINEで送る」ボタンもつけちゃいました。(-_-;)

 

※全部つける必要はありませんよ。好きなものだけ選んで表示させても問題ないです。

たとえば「Google+1」ボタンなんかは動作が重いので、私なんかはつけたり外したりして様子を見てます。
具体的にどれだけ利用されているかも微妙ですからね。

 

では、最初は「ツイート」ボタンから行ってみましょ。

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


TOPへ戻る