facebook_logo.jpg

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は"http://vba-geek.jp"なのでそれに"/?xml"を付加して"http://vba-geek.jp/?xml"がこのブログのFeed用URLとなります。

実際には以下のHTMLとなります。
http://feedly.com/index.html#subscription/feed/http://vba-geek.jp/?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設定については、別の記事で紹介していますのでそちらを参考にしてください。

スポンサードリンク

  

関連記事