photoBy: http://www.userlogos.org/files/logos/jumpordie/fl…
facebookいいね、ツイート、googleplusone、hatenaボタンを設置
今回は以下の条件で。
cakephp2
boostrap3
スマートフォン用
bootstrap3でいい感じに設置するには？（スマートフォン用）
・CSS (less)
ul {
&.bookmark { li { width:100%; display:table; div { display: table-cell; vertical-align:top; width:50%; } } }
}
HTMLコード
<!-- Button trigger modal --><button class="btn btn-info" data-toggle="modal" data-target="#myModal"><i class="fa fa-bookmark"></i> シェア</button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <ul class="bookmark"> <li> <div class="hatena"></div> <div class="twitter"></div> </li> <li> <div class="google-plusone"></div> <div class="facebook"> <fb:like href="<?=FULL_BASE_URL.$_SERVER['REQUEST_URI'];?>" send="false" layout="box_count" width="50" show_faces="false"></fb:like> </div> </li> </ul><!-- /.bookmark --> </div> </div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->
js
http://itra.jp/jquery_socialbutton_plugin/
を読み込んでから
<? $this->start('script');//script or css?><script>
$(function() {
$('.hatena').socialbutton('hatena', { button: 'vertical', url: '<?=FULL_BASE_URL;?><?=$this->here;?>' }); $('.twitter').socialbutton('twitter', { button: 'vertical', url: '<?=FULL_BASE_URL;?><?=$this->here;?>', text: '<?=$title; ?>' }); $('.google-plusone').socialbutton('google_plusone', { lang: 'ja', size: 'tall', url: '<?=FULL_BASE_URL;?><?=$this->here;?>' });
});
</script><? $this->end(); ?>
これで完成。
完成サンプル
シェアボタンを押すと、以下の内容がポップアップされる。
PCからの表示なので位置がずれているがスマフォから見れば統一される。
↧