HOME > ブログ開発・収入 > FC2ブログで自作のシェアボタンを設置するには

FC2ブログで自作のシェアボタンを設置するには




SNS嫌いの私ですが、記事の下にシェアボタンを設置することにしました。
とりあえず先行実装ということで、まだPC版テンプレートだけですが、スマホ版テンプレートにもそのうち設置します。(多分、これをそのままコピペでも大丈夫そうな気がします。)
この記事では、FC2ブログでのシェアボタンの設置方法について書きます。


SNS嫌いの私がなぜシェアボタンを設置したかという理由は後日記事にまとめます。
追記:書きました。


関連記事



FC2ブログでシェアボタンを設置するには




FC2ブログでは、ブログの管理画面からシェアボタンを設置することが出来ますが、PageSpeed Insightsによると、シェアボタンが原因でページの表示に遅延が発生しているとのことです。
また、Firefoxなどの一部のブラウザでは正常にボタンが表示されない問題も抱えています。
その上、LINEとTwitterとFacebookにしか対応していません。今流行りのはてなブログやグーグルプラスには対応していないのです。

私としては、シェアボタンはテキスト形式にCSSで装飾化した程度のボタンで良いです。
最低限、どのブラウザでも正常に表示され、なおかつページの表示に遅延を発生させない作りにしたいと思ったので、フルスクラッチでソースを作ることにしました。
あとそれから装飾の拡張性なども考えると、ソースからつくったほうが明らかに良いです。また新たに何かしらのSNSが流行ればすぐにリンクを挿入することも可能ですし。



シェアボタン設置のソース



少々御託が過ぎましたが、ここからシェアボタンを設置する方法について書きます。

任意の場所に下記のHTMLソースを入力します。私はアドセンスの広告の上に表示させました。(記事本文の直下)

シェアボタンのソース

説明すると、シェアボタンをリスト表示にさせています。リスト表示にしないと、ボットに露骨なSEO対策だと誤解される可能性があるからです。
<%topentry_link>が閲覧している記事のURLが代入される変数です。<%topentry_title>が閲覧している記事のタイトルが代入される変数です。

そして、CSSがこちら。

シェアボタンの装飾

リスト表示特有の点を消して、横一列に表示しています。リンクを四角に広げてクリックしやすくしています。
マウスオーバーした時にリンクであることが分かるようにもしています。
シェアボタンの色は、それぞれのSNSのカラーコードをそのまま入力しています。色がちゃんとしていないとシェアボタンだと気づかないことがありますからね。
角も丸めてボタンっぽくしています。ボタンを立体的にしようかと思いましたが、自分の技術力の無さと流石に過剰装飾かもしれないと思ったのでやめました。


少々見苦しいソースではありますが、これでも正常にシェアボタンとして機能しています。(ChromeとFirefoxで確認済み)
あとはお好みで修正すると良いでしょう。出来上がりは、こんな感じになります。

シェアボタンの設置



終わり。
シェアボタン

スポンサーリンク


関連記事