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の指定方法は以下のとおりです。

http://b.hatena.ne.jp/bookmarklet?url=<エンコードされた記事のURL>&btitle=<エンコードされた記事のタイトル文字列>

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

http://b.hatena.ne.jp/bookmarklet?url=<%topentry_enc_link>&btitle=<%topentry_enc_utftitle>

Twitter

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

http://twitter.com/share?text=<エンコードされた記事のタイトル文字列>&url=<エンコードされた記事のURL>

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

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

http://twitter.com/share?text=<%topentry_enc_utftitle>&url=<%topentry_enc_link>

Facebook

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

https://www.facebook.com/sharer/sharer.php?u=<エンコードされた記事のURL>

<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>指定します。 実際には以下のHTMLとなります。

https://www.facebook.com/sharer/sharer.php?u=<%topentry_enc_link>

Google+

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

https://plus.google.com/share?url=<エンコードされた記事のURL>

<エンコードされた記事のURL>は、FC2ブログのテンプレート用変数<%topentry_enc_link>指定します。 実際には以下のHTMLとなります。

https://plus.google.com/share?url=<%topentry_enc_link>

LINE

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

http://line.me/R/msg/text/?<エンコードされた記事のタイトル文字列>%0d%0a<エンコードされた記事のURL>

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

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

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

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

http://line.me/R/msg/text/?<%topentry_title>%0d%0a<%topentry_link>

Evernote

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

http://www.evernote.com/clip.action?url=<エンコードされた記事のURL>&title=<エンコードされた記事のタイトル文字列>

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

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

http://www.evernote.com/clip.action?url=<%topentry_enc_link>&title=<%topentry_enc_utftitle>

Feedly

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

http://feedly.com/index.html#subscription/feed/<ブログのFeed用URL>

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

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

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

http://feedly.com/index.html#subscription/feed/https://selifelog.com/?xml

SNSボタン設置用HTML

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

<div class="sns-bt">
<ul>
<li><a href="http://b.hatena.ne.jp/bookmarklet?url=<%topentry_enc_link>&btitle=<%topentry_enc_utftitle>" target="_blank">はてブ</a></li>
<li><a href="http://twitter.com/share?text=<%topentry_enc_utftitle>&url=<%topentry_enc_link>" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=<%topentry_enc_link>" target="_blank">Facebook</a></li>
<li><a href="https://plus.google.com/share?url=<%topentry_enc_link>" target="_blank">Google+</a></li>
<li><a href="http://line.me/R/msg/text/?<%topentry_title>%0d%0a<%topentry_link>" target="_blank">LINE</a></li>
<li><a href="http://www.evernote.com/clip.action?url=<%topentry_enc_link>&title=<%topentry_enc_utftitle>" target="_blank">Evernote</a></li>
<li><a href="http://feedly.com/index.html#subscription/feed/自分のブログのURL/?xml" target="_blank">Feedly</a></li>
</ul>
</div>

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

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

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

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

.sns-bt {
 margin:0 0 20px 0;
 font-size: 12px !important;
}
.sns-bt ul {
 width:100%;
 display:table;
 table-layout:fixed;
 text-align:center;
 margin:0;
 padding:0;
 border-spacing:4px;
}
.sns-bt ul li {
 display:table-cell;
 padding:0;
 margin:0;
 white-space:nowrap;
 overflow:hidden;
}
.sns-bt ul li a {
 border-bottom:2px solid #333;
 display:block;
 padding:4px 0;
}
.sns-bt ul li a:hover {
 color:#fff;
}
.sns-bt ul li:nth-child(1) a {
 border-bottom:2px solid #008FDE;
 color:#00A5DE;
} /*hatena*/
.sns-bt ul li:nth-child(2) a {
 border-bottom:2px solid #55acee;
 color:#55acee;
} /*twitter*/
.sns-bt ul li:nth-child(3) a {
 border-bottom:2px solid #3d5b98;
 color:#3d5b98;
} /*facebook*/
.sns-bt ul li:nth-child(4) a {
 border-bottom:2px solid #dd4b39;
 color:#dd4b39;
} /*Google+*/
.sns-bt ul li:nth-child(5) a {
 border-bottom:2px solid #2cbf13;
 color:#2cbf13;
} /*line*/
.sns-bt ul li:nth-child(6) a {
 border-bottom:2px solid #20C05C;
 color:#20C05C;
} /*evernote*/
.sns-bt ul li:nth-child(7) a {
 border-bottom:2px solid #8cc63f;
 color:#8cc63f;
} /*feedly*/
.sns-bt ul li:nth-child(1) a:hover {
 background:#008FDE;
 color:#fff;
} /*hatena*/
.sns-bt ul li:nth-child(2) a:hover {
 background:#55acee; color:#fff;
} /*twitter*/
.sns-bt ul li:nth-child(3) a:hover {
 background:#3d5b98; color:#fff;
} /*facebook*/
.sns-bt ul li:nth-child(4) a:hover {
 background:#dd4b39; color:#fff;
} /*google+*/
.sns-bt ul li:nth-child(5) a:hover {
 background:#2cbf13; color:#fff;
} /*line*/
.sns-bt ul li:nth-child(6) a:hover {
 background:#20C05C; color:#fff;
} /*evernote*/
.sns-bt ul li:nth-child(7) a:hover {
 background:#8cc63f; color:#fff;
} /*feedly*/

上記CSSを自分が使用しているブログテンプレートのCSSにコピー&ペーストしてください。 追記場所はCSSの最後でも良いですし、特に決まりはありません。

よくわからなければ最後(最終行)にコピー&ペーストしてください。 ボタンの並び順とCSSの"nth-child(番号)"の番号が対応する形となっています。

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

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

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

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

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

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

FC2ブログでOG(Open Graph Protocol)メタタグを設定してブログの記事をSNSに正しく伝える方法
OG(Open Graph Protocol)メタタグは、Facebookやmixi、GREEなどのSNSでシェアされる際に記事のタイトルや概要、シェアされた時に使用する画像などの情報をSNSに正しく伝えるためのメタ情報です。 FC2でこの...

コメント

タイトルとURLをコピーしました