FC2ブログカスタマイズ:FacebookやTwitterなどのSNSボタンをカスタマイズしてFC2ブログに設置する方法

FacebookやTwitterなどのSNSボタンを自分でカスタマイズしたオリジナルのボタンとしてFC2ブログに設置する方法について覚書。

Facebook、Twitter、はてブ、Google+、Evernote、LINE、Feedlyの各ボタンを設置する場合のHTML(URL指定)とCSSの記述方法について説明します。

各種SNSボタンのHTML(URL指定)について

各種SNSボタンがクリックされた時に対象のSNSに送るためのURLの指定方法について以下に記載します。

はてブ

はてなブックマークへのURLの指定方法は以下のとおりです。

<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>を指定し、<エンコードされた記事のタイトル文字列>にはテンプレート用変数<%topentry_enc_utftitle>を指定します。

実際には以下のHTMLとなります。

Twitter

TwitterへのURLの指定方法は以下のとおりです。

<エンコードされた記事のタイトル文字列>にはテンプレート用変数<%topentry_enc_utftitle>を指定し、<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>指定します。

実際には以下のHTMLとなります。

Facebook

FacebookへのURLの指定方法は以下のとおりです。

<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>指定します。

実際には以下のHTMLとなります。

Google+

Google+へのURLの指定方法は以下のとおりです。

<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>指定します。

実際には以下のHTMLとなります。

LINE

LINEの”送る”のURLの指定方法は以下のとおりです。

上記の例は、LINEでブログ記事タイトル + 改行 + ブログのURL というフォーマットで送る場合の例です。

URL指定にある”%0d%0a”は、エンコードされた改行コードを示しています。

<エンコードされた記事のタイトル文字列>にはテンプレート用変数<%topentry_enc_utftitle>を指定し、<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>指定します。

実際には以下のHTMLとなります。

Evernote

EvernoteへのURLの指定方法は以下のとおりです。

<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>を指定し、<エンコードされた記事のタイトル文字列>にはテンプレート用変数<%topentry_enc_utftitle>を指定します。

実際には以下のHTMLとなります。

Feedly

FeedlyへのURLの指定方法は以下のとおりです。

<ブログのFeed用URL>はFC2ブログの場合、自分のブログのURLの末尾に”/?xml”を付加したURLとなります。

例えばこのブログであれば、ブログのURLは”https://selifelog.com”なのでそれに”/?xml”を付加して”https://selifelog.com/?xml”がこのブログのFeed用URLとなります。

実際には以下のHTMLとなります。

SNSボタン設置用HTML

上記の各SNSへのURL指定を使用してSNSのボタンを設置するHTMLのサンプルです。

上記のHTMLを自分が使用しているブログのテンプレートの設置したい場所にコピー&ペーストしてテンプレートを更新します。

このブログでは、各個別記事タイトル下と各個別記事本文下にSNSボタンが設置されるようにテンプレートに上記のHTMLを貼り付けています。

ボタンのデザイン(CSS)について

各SNSボタンのデザインは、CSSによって設定しています。

このブログのSNSボタンのデザインを設定しているCSSを以下に記載します。

上記CSSを自分が使用しているブログテンプレートのCSSにコピー&ペーストしてください。

追記場所はCSSの最後でも良いですし、特に決まりはありません。
よくわからなければ最後(最終行)にコピー&ペーストしてください。

ボタンの並び順とCSSの”nth-child(番号)”の番号が対応する形となっています。

ボタンの並びが1番目(一番左)に対応するCSSが”nth-child(1)”になりますのでボタンの並びを入れ替えた場合は、並びに対応して”nth-child(番号)”の番号を変更してください。

カスタマイズした各種SNSボタンの設置方法まとめ

私のブログでは、テキストベースのシンプルなデザインを使っています。

webフォントなどを使うと丸ボタンにしたりもできます。

SNSのボタンを設置する際にはメタタグのOGP設定を有効にしておいたほうが良いです。

メタタグのOGP設定については、別の記事で紹介していますのでそちらを参考にしてください。

OG(Open Graph Protocol)メタタグは、Facebookやmixi、GREEなどのSNSでシェアされる際に記事のタ...