ソーシャルボタンを設置する

前回の続き。詳細ページにtwitterやfacebookなどのソーシャルボタンを設置した。以前WordPressで設置したのを参考にした。

成果物：index.html->item.php (ソーシャルボタンを設置)

メモ

はてなブックマークは現在ページのURLを設定する必要がある。その他3つは現在ページのURLがデフォルト設定(だと思う)
JavaScriptで文字列を代入する際、改行の所にバックスラッシュを入れる必要がある
JavaScriptはlocation.hrefで現在のページのURLを取得できる

ソースコード
socialbutton.js

// ソーシャルボタン
function get_social_buttons(url) {
	title = "スマホキャプチャーギャラリー";

	var html = '\
		<ul class="social_buttons">\
			<li>\
    			<!-- はてなブックマーク -->\
				<a href="http://b.hatena.ne.jp/entry/'+url+'" class="hatena-bookmark-button" data-hatena-bookmark-title='+title+' data-hatena-bookmark-layout="simple" 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>\
    			<!-- twitter -->\
				<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="en">Tweet</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>\
    			<!-- google+ -->\
				<div class="g-plusone" data-size="medium" data-annotation="none"></div>\
				<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>\
			</li>\
			<li>\
    			<!-- facebook -->\
				<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/en_US/all.js#xfbml=1";\
				  fjs.parentNode.insertBefore(js, fjs);\
				}(document, "script", "facebook-jssdk"));</script>\
				<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>\
			</li>\
		</ul>\
	';

	return html;
}

socialbutton.css

ul.social_buttons {
    margin: 0;
}

ul.social_buttons:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.social_buttons li {
    float: left;
    list-style: none;
    padding-right: 10px;
}

item.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="socialbutton.css" />
	<title>スマホキャプチャーギャラリー</title>
</head>
<body>
	<a href="index.html">Home</a> | <a href="upload.html">アップロード</a> | <a href="ranking.html">人気順</a>  | <a href="latest.html">新着順</a>

<?php
	require_once('config.php');
	require_once('function.php');

	$dbh = connect_db();

	$id = $_GET['id'];
	// アクセスカウンタをインクリメント
	$sql = sprintf("update mobile_capture_showcase set counter=counter+1 where id=%d", $id);
	$dbh->query($sql);

	// 該当IDの画像情報を表示
	$sql = sprintf("select * from mobile_capture_showcase where id=%d", $id);
	foreach ($dbh->query($sql) as $item) {
		$path = "./images/" . $item['filename'];
		echo sprintf(
			'<table>
				<tr>
				<td>
					<img src="%s" alt="image" width="320" />
				</td>
				<td>
					<table>
						<tr>
							<td>名前：%s</td>
						</tr>
						<tr>
							<td>投稿時刻：%s</td>
						</tr>
						<tr>
							<td>OS:%s</td>
						</tr>
						<tr>
							<td>アクセス数：%s</td>
						</tr>
						<tr>
							<td>コメント：%s</td>
						</tr>
						<tr>
							<td><form action="edit.php" action="get">
								<input type="hidden" name="id" value=%d />
								<input type="text" name="updelkey" id="updelkey" size="20" placeholder="編集・削除キー(4桁数字)" /><input type="submit" value="編集" /><input type="button" id="btn_delete" data-id="%d" value="削除" />
							</form></td>
						</tr>
						<tr>
							<td><span id="btn_social"></span></td>
						</tr>
					</table>
				</td>
				</tr>
			</table>',
			$path,
			$item['name'], $item['time'], $item['os'], $item['counter'],
			h($item['comment']),
			$id,
			$id);
	}

	$dbh = null;
?>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script src="function.js" type="text/javascript"></script>
	<script src="socialbutton.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		// 削除ボタン
		$('#btn_delete').click(function() {
			if (confirm("削除しますか？")) {
				$.post('./delete.php',
					{
						id: $(this).data('id'),
						updelkey: $('#updelkey').val()
					},
					function(data) {
						if (data.result == 'success') {
							// index.htmlにジャンプ
							location.href = "./index.html";
						}
						else {
							alert(data.message);
						}
					},
					'json'
				);
			}
		});

		// ソーシャルボタン
		$('#btn_social').append(get_social_buttons(location.href));
	});
	</script>
</body>
</html>

参考サイト