サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. 「このページを共有…
  • 最終更新日:
  • 投稿者: @signpostme

「このページを共有する」機能を追加&サンプルコード

サイトのトップページ、個別ページの右下に「このページを共有する」というポップアップが出てくる機能を追加しました。需要あるかわかりませんが、サンプルコードも公開しておきます。

jQueryの読み込み

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

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/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

HTML

<div id="popup">
	<div class="popup-inner">
		<h1 class="popup-title">このページを共有する</h1>
			<div class="page-info">
				<div class="page-info-inner">
				<?php if( has_post_thumbnail() ){ the_post_thumbnail(); }?>
				<p id="pop-single"><?php the_title(); ?></p>
				</div>
			</div>
		<div class="popup-sns-btn">
			<ul>
				<li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div></li>
				<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="_gl0ssy" data-lang="ja" data-count="none">ツイート</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
			</ul>
		</div>
	</div>
</div>

 

CSS

#popup {
	width: 300px;
	height: 184px;
	position: fixed;
	bottom: -184px;
	right: 16px;
	border-top: 1px solid #efefef;
	border-left: 1px solid #efefef;
	border-right: 1px solid #efefef;
	background: #fff;
	z-index: 99;
}
.popup-title {
	padding: 16px;
	border-bottom: 1px solid #efefef;
	font-size: 14px;
	color: #333;
	font-weight: bold;
}
.page-info {
	background: #ffd;
	border-bottom: 1px solid #efefef;
}
.page-info-inner {
	overflow: hidden;
	padding: 16px;
}
.page-info-inner img {
	display: block;
	float: left;
	width: 50px;
	margin-right: 16px;
}
.page-info-inner p {
	display: block;
	float: left;
	width: 202px;
	font-size: 12px;
	color: #333;
	line-height: 1.4;
	margin-top: 4px;
}
.popup-sns-btn ul {
	overflow: hidden;
	padding: 16px 16px 16px 16px;
}
.popup-sns-btn li {
	float: left;
	margin-right: 16px;
}

#pop-single {
	margin-top: 1px;
}

 

JavaScript

$(function(){
	$('#popup').delay(800).animate({"bottom":"0"},300,'swing');
});

 
 

まだ未完成?

開いているままでは邪魔になってしまうと思うので、あとは閉じるボタンつけたほうがいいかなと。
とりあえずはこれで記事のシェアがしやすくなったのではないでしょうか。
 

新着記事を見る

TOP