広告

posted by fanblog

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

新しく追加されたSNSボタン付スキンは最初から3個のSNSボタンが設置されていますので、初心者の方にはとても魅力的なものなのですが、SNSボタン付でないスキンに変更するとSNSボタンは表示されなくなってしまいます。
SNSボタン
こっちのデザインのスキンにもSNSボタンが付いていればいいのに...って思いながらデザイン重視でSNSボタンを諦めてしまった方のためにSNSボタン付スキンに設置されている3個のSNSボタンを自分のサイトの同じ場所に設置する方法をご説明します。(≧ω≦)b

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

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

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

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

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

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)」を押して完了です。 SNSボタン

メインとアーカイブの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ボタン付スキンに変身させることができますので、ご興味のある方はぜひお試しください。(´・ω・`)b
※上記Htmlタグはコピー&ペーストでそのままご利用になれます。
※Htmlタグのご使用につきましては、利用者の自己責任にてお願いします。

この記事へのコメント

« 前の記事 : ChromeにWebページのカラー情報を取得できる「ColorZilla」を導入してみました
ファンブログのSNSボタンの並びや間隔を調整する方法 : 次の記事 »

ブログパーツ
美容整形
Related Posts Plugin for WordPress, Blogger...
×

この広告は30日以上新しい記事の更新がないブログに表示されております。