下記のソースコードをコピペすれば、簡単にソーシャルボタンが設置出来ます、というセットです。

HPにもwordpressにも、その他ブログにも対応しています。

ツイッター・はてなブックマーク・フェイスブック・Google+

に対応しています。

主に自分用です。でも、汎用性はあります。

こんな感じで表示されます

1.HTMLコードへのコピペ部分

<ul id=”TopBar_b”>

<li><!– ツイッター –>
<a href=”https://twitter.com/share” data-lang=”ja”>ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
</li>

<li><!– はてなブックマーク –>
<a href=”http://b.hatena.ne.jp/entry/” class=”hatena-bookmark-button” data-hatena-bookmark-layout=”standard-balloon” title=”このエントリーをはてなブックマークに追加”><img src=”http://b.st-hatena.com/images/entry-button/button-only.gif” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>
</li>

<li><!–googleプラス–>
<!– +1 ボタン を表示したい位置に次のタグを貼り付けてください。 –>
<div data-size=”medium”></div>

<!– 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 –>
<script type=”text/javascript”>
window.___gcfg = {lang: ‘ja’};

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>

<li><!– フェイスブック –>

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

<div data-send=”false” data-layout=”button_count” data-width=”120″ data-show-faces=”false”></div>
</li>

</ul><!– TopBar_b –>

2.スタイルシートへのコピペ部分

#TopBar_b {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #CCCCCC;
color: #333333;
height: 40px;
left: 0;
margin:0 0 25px 0 !important;
padding: 2px 0 !important;
top: 0;
width: 100%;
list-style-type: none !important;

}

#TopBar_b li {
line-height:1 !important;
float: left;
margin-left: 15px;
margin-top: 7px;
text-align: left;
}

 

スポンサー

お問い合わせ

この記事についてご質問があれば、お問い合わせ下さい。

お名前(必須)
お名前フリガナ(必須)
メールアドレス(必須)
メールアドレス確認(必須)
お問い合わせ記事URL
お問い合わせ内容(必須)