ファンブログにSNSボタンを設置してみよう！

ファンブログカスタマイズ：HTML 編投稿日：2012年05月13日 15:15

新しく追加されたSNSボタン付スキンは最初から3個のSNSボタンが設置されていますので、初心者の方にはとても魅力的なものなのですが、SNSボタン付でないスキンに変更するとSNSボタンは表示されなくなってしまいます。

こっちのデザインのスキンにもSNSボタンが付いていればいいのに...って思いながらデザイン重視でSNSボタンを諦めてしまった方のためにSNSボタン付スキンに設置されている3個のSNSボタンを自分のサイトの同じ場所に設置する方法をご説明します。(≧ω≦)b

SNSボタン付スキンからSNSボタン付でないスキンに変更する場合や、SNSボタン付でないスキンを使用している方でSNSボタンを表示させたい方は、以下に記しますSNSボタンコードを指定の位置に貼るだけでSNSボタン付スキンと同じようにSNSボタンを表示させることができます。

SNSボタン付スキンでは、メイン、アーカイブ、1記事でSNSボタンが表示されるように設定されています。全てのページで表示させたい方は、メイン、アーカイブ、1記事のHTMLにSNSボタンのコードを貼る必要がありますので、それぞれのHTMLのバックアップをとっておくことを推奨します。

► CSSやHTMLファイルのバックアップの方法

▼ それでは設置方法の説明です ▼

次のSNSボタンコードをコピーして、サイトに貼り付けてください。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="4e48d24a8482d329973038e68dbf66b2a0b94f83" data-button="button-1" data-url="{$BlogEntryPermalinkUrl$}">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="UTF-8"></script>
<a href="http://twitter.com/share" class="twitter-share-button"
	data-url="{$BlogEntryPermalinkUrl$}"
	data-text="{$BlogEntryTitle$}&nbsp;｜&nbsp;{$BlogName$}"
	data-count="none" data-lang="ja">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href={$BlogEntryPermalinkUrl$}&layout=button_count&amp;show_faces=false&amp;width=120&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>

ボックス内にマウスを置くだけでコードが全て選択されます。右ボタン⇒コピー でお持ち帰りください。

1記事のHTMLにSNSボタンコードを貼る方法

上記のSNSボタンコードをコピーして、「1記事」のHTMLの以下の位置に貼り付けます。投稿者：というテキストが目印になりますので、上から探していけばすぐ見つかると思います。

</BlogEntryIfAllowEntryRatings>

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="4e48d24a8482d329...
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="U...
<a href="http://twitter.com/share" class="twitter-share-button"
	data-url="{$BlogEntryPermalinkUrl$}"
	data-text="{$BlogEntryTitle$}&nbsp;｜&nbsp;{$BlogName$}"
	data-count="none" data-lang="ja">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href={$BlogEntryPermalinkUrl$}&l...

<div class="entryInfo">投稿者：<a href="{$BlogEntryWriterUrl$}" target="_blank">

そのまま貼りますと記述してある元のソースと、SNSボタンのコードが繋がってしまう恐れがありますので、コードを貼る前に3回程改行して目的の場所の行間を広げてください。改行して間を広げた真中あたりの行頭にカーソルを置いてから、SNSボタンのコードを貼れば上下に空きができますので、貼ったコードと元のソースとの区別がつきますから安全に作業が行えます。

コードを貼り付けましたら、「プレビュー(P)」を押して確認してください。下の画像のように表示されていましたら成功です。プレビュー画面を閉じ「保存(S)」を押して完了です。

メインとアーカイブのHTMLにSNSボタンコードを貼る方法

メイン、アーカイブのページにもSNSボタンを表示させたい方はそれぞれのHTMLの以下の位置にコードを貼り付けます。投稿者：というテキストが目印になりますので、上から探していけばすぐ見つかると思います。

</BlogEntryIfExtended>

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="4e48d24a8482d329...
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="U...
<a href="http://twitter.com/share" class="twitter-share-button"
	data-url="{$BlogEntryPermalinkUrl$}"
	data-text="{$BlogEntryTitle$}&nbsp;｜&nbsp;{$BlogName$}"
	data-count="none" data-lang="ja">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href={$BlogEntryPermalinkUrl$}&l...

<div class="entryInfo">
	投稿者：<a href="{$BlogEntryWriterUrl$}" target="_blank">

※ メインとアーカイブは一度に10個の記事が表示されますので起動が重たくなる恐れがあります。

いかがでしたでしょうか？SNSボタンのコードや貼る場所が理解できますと、いらないボタンを削除したり新しいボタンを追加することにもチャレンジしやすくなりますので、色々と試してみてください。
今回設置しましたSNSボタンの整列方法につきましてはこちらで解説していますので、合わせてお読みください。

► ファンブログのSNSボタンの並びや間隔を調整する方法

コードを貼るだけで簡単にSNSボタン付スキンに変身させることができますので、ご興味のある方はぜひお試しください。(´・ω・`)b

※上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※Htmlタグのご使用につきましては、利用者の自己責任にてお願いします。

≪　前の記事に戻る　｜　次の記事を読む　≫