書道家でもできた!facebook「いいね」,Twitter,google「+1」ボタンの設置

昨今流行のSNSですが、サイトにこんなボタンがあるサイトが増えましたね。

で、1つ1つ紹介しているサイトはあるのですが、まとめているのがなかったのでまとめてみました。

あと、このボタンがあると何がいいかというと人気のバロメーターとSEO効果につながります。
(そりゃ検索エンジンもっているのがgoogleだからねー、設置最優先は「+1」になるのは当然です。)

■facebookの「いいねボタン」
「いいねボタン」とも言われますが、コードは「Facebookコネクト」から簡単に取得できます。

で、HTML素人の方にとって、
このコードがわかったからといって、“貼り付ける”ということが
どうするのかがほとんど書かれてないので私もわかりませんでした!

FBは、2か所に貼り付けが必要です。
▼ステップ1
1つ目のプラグインコード(意味不明でOKです)
<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”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

これを貼りたいサイトのHTML画面で<body>で検索(Ctrlキー+F)して
一番上の<body>の直後に貼り付けます。

具体的には
<body>←ページの上から見て、最初のbody後に追加。
<div id=”fb-root”></div>
<script>・・・・</script>

▼ステップ2
下部のプラグインを自分でボタンを貼りたい場所に貼り付けます。
<div data-href=”設置URL” data-send=”true” data-layout=”button_count” data-width=”450″ data-show-faces=”true”></div>

(裏ワザ)“data-width=”450″ ”なくした以下の記述がおススメ♪
<div data-href=”設置URL” data-send=”true” data-layout=”button_count”  data-show-faces=”true”></div>

これで完成。

参考サイト http://www.facebook-japan.com/iine.html

■Google +1ボタン

google公式「+1 をウェブサイトに表示」で十分わかりやすいです。

ここもfacebook同様2つの設置が必要です。
が、同じ場所に貼っても問題ありません。
以下をひとまとめに貼りたい場所に貼ればOK(私の検証ではOKでした)!
あとURL以外は全員一緒なので以下を丸々貼ってもOKのはずです(変更があったら知らん)。

<!– 次のタグを head 要素内または body 終了タグの直前に貼り付けてください –>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”>
{lang: ‘ja’}
</script>
<!– 次のタグを +1 ボタンを表示する箇所に貼り付けてください –>
<g:plusone></g:plusone>

URLを入れたい人は最後の行がこうなります。
<g:plusone href=”設置URL”></g:plusone>

URLを入れると入れたURLのみの評価になるようですね。
どっちがいいのか不明です!

参考サイト http://weble.org/2011/06/02/google-plusonebutton

■Twitter ツイートボタン

これも公式「ツイートボタン」がいいですねー。

タイプを選んで、これを貼り付けるだけです(下記は「 」バージョン)。

<a href=”https://twitter.com/share” data-count=”horizontal” data-via=”ここにIDが入る” data-lang=”ja”>ツイート</a><script type=”text/javascript” src=”//platform.twitter.com/widgets.js”></script>

最後に、これを普通に入れるとむちゃくちゃな配置になります。
そこでテーブルに格納することをオススメします。
これができる人はテーブルのHTMLの記述なんて平気さ!という人もいるでしょうけど一応書いておきます。
※<td>この間にプラグインコードをはめてね!</td>(枠なし3枠記述バージョンです)

<table border=”0″>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

コメントを残す

メールアドレスが公開されることはありません。

コメント

お名前

ウェブサイトURL

CAPTCHA