bootstrap3 スマートフォン用ソーシャルブックマークボタン

2014年1月3日更新 view: 142 view
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からの表示なので位置がずれているがスマフォから見れば統一される。

スポンサードリンク

関連記事

関連カテゴリ