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への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への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.cloudfree.jp"なのでそれに"/?xml"を付加して"https://selifelog.cloudfree.jp/?xml"がこのブログのFeed用URLとなります。
実際には以下のHTMLとなります。
http://feedly.com/index.html#subscription/feed/https://selifelog.cloudfree.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設定については、別の記事で紹介していますのでそちらを参考にしてください。
コメント