ソーシャルネットボタン設置

ソーシャルネットボタン設置

ブログ形式のサイトへ移行したのを気に、他のサイトでつけているようなボタン類(はてな、ツイッター、Google、facebook)を設置して見ました。

簡単そうで、以外に時間がかかりますね~。軽く○時間はかかりましたよ・・・。


ツイッターボタン

ツイートボタンは下記URLからコードを入手します。

ツイートボタン

  • URLを共有:ツイート対象サイトのURL
  • ツイート内テキスト:ツイート対象サイトの題名
  • ユーザー名=アカウント名を入力
  • 言語を選択

あとはコード(画像リンク)を好きな場所に貼り付けましょう。

Wordpressでツイートボタンを設置する場合は、

記事URL:<?php the_permalink(); ?>
記事題名:<?php the_title(); ?>
固定ページ:各ページごとに手打ち

ちなみに、よくスクロールバーのところにへばりついて移動するfollow meボタンは、以下URLからコードを入手できます。

Follow Meボタン(標準)
ツイッターボタン

twitter accountは、ユーザー名を入れます。あとは色とか選んで、コードを作って、htmlの<body>直前に貼りつけて終了です。

はてなブックマークボタン

はてなブックマークボタンは、下記URLよりコードを入手します。

はてなブックマークボタン設置

<a href="http://b.hatena.ne.jp/entry/アドレス" class="hatena-bookmark-button" data-hatena-bookmark-title="タイトル" data-hatena-bookmark-layout="standard" 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>
  • タイトルと書いてある場所:記事の題名
  • アドレスと書いてある場所:記事のURL(http://~)
  • <script></script>はhead内に記入でもOK

Wordpressではてなボタンを設置する場合は、

記事URL:<?php the_permalink(); ?>
記事題名:<?php the_title(); ?>
固定ページ:各ページごとに手打ち

はてなブックマークには、他にもはてなブックマークブログパーツというのがあるので、これも設置できれば設置しときましょう。

facebook(いいね)ボタン

facebookのいいねボタンは、他のボタンよりちょっと厄介です。

まず、facebook開発者にてappIDを取得します。

サイトに飛ぶと、appdisplaynameとappnamespaceという欄があるので、適当に英字で入力する。appdisplaynameはアプリ自体の名前なのかな?valid(正当)とでたら何でもOK。appnamespaceはアプリページかなにかかな、available(利用できる)とでればOKだ。URLとサイト名とかでもいいと思う。

作成後アプリIDを入手したら、下記URLでボタンを作成する。

いいねボタン作成

全部英語なのでその時点で滅入るが、URLtoLikeにサイトのURLを入力し(PHPタグを先に入れるとエラーになる)、iframeにてコードを入手する。

コードをブログの設置したい場所にコピー。wordpressで記事ごとに使用するなら、最初に入力した、URLの部分を:<?php the_permalink(); ?>に書き換えましょう。(<iframe src=”//www.facebook.com/plugins/like.php?href=<?php the_permaLink(); ?>&send=false・・・略・・・>)

さらに下に移動し、Get Open Graph Tagsで、(これはページと連動させない人には不要なこと)

  • title:記事の題名
  • type:サイト全体はblog、websiteだが、各ページはarticle
  • URL:記事のURL
  • image:記事の画像
  • sitename:サイトの名前
  • appID:アプリのID

を入れて、コード(メタタグ)を生成し、そのコードを、htmlの<head></head>内にコピーして終わり。Wordpressの記事ごとに使うなら、記事titleを:<?php the_title(); ?>に、記事urlを:<?php the_permaLink(); ?>に変更する。

Open Graphタグをwebページに含めることで、あなたのページはFacebook Pageと 同等の物になります。つまり、ユーザがページ上のLikeボタンを押すと、ページとユーザの間にconnectionが作られます。

メタタグをwebページに追加すると、そのページと連携するLikeボタンを置けるようになります。パーツテンプレートでheaderを別にして、固定ページで記事を沢山書いていると、header.phpにページの数だけmeta urlを書かなければならずかなり大変です。ボタンを付ける前に色々と考えておかないと失敗しますね。

参考:Facebookヘルプ日本語訳

Google+1ボタン

Google+1ボタンは下記URLよりコードを入手します。

+1ボタン

以外に忘れがちなのが、詳細オプション→+1ボタンの対象とするURLを入力せずにコードを生成すること。隠れているので表示させてURL入れときましょう。

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone annotation="inline" href="アドレス"></g:plusone>
 
<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
  (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>

スクリプトタグはhead内に入れときましょう。Wordpressの記事で使いたい場合は、アドレスとなっているところを、記事URL:<?php the_permalink(); ?>に直せばOKです。

記事に設置する

横並びに設置するのには、リストを使っているサイトが多いように思われます。

<ul id="botan">
<li>ツイート</li>
<li>はてな</li>
<li>いいね</li>
<li>+1</li>
</ul>

cssはfloatで横並びに。

ul#botan {
	width:100%;
	height:auto;
	}
ul#botan li {
	float:left;
	display:inline;
	list-style-type:none;
	}
ul#botan li a {
	display:block;
	position:relative;
	}

cssのdisplayやpositionはテキストリンクを使う場合のみ必要です。

最後、いいねボタンのwidthが450pxでoverflow:hiddenの部分が場所をとってるので、iframeの中をいじって100pxとかにしておきましょう。html5で組んでるなら不要です。

2012年2月2日11:28 PM | カテゴリー: HTML4,5 | コメント(0)

コメントを残す

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