Tuesday, 31 May 2016

» » » Integrate share with facebook,linkedin,twitter,google plus

Integrate share with facebook,linkedin,twitter,google plus

No comments
HTML

 <body>

    <nav>      
        <ul class="clearfix">

            <li>
                <ul>

             
                    <li><a href="javascript:void(0)" id="shareFB"><span class="fontawesome-facebook"></span></a></li>

                    <li><a id="shareTwit" href="http://twitter.com/share"><span class="fontawesome-twitter"></span></a></li>

                    <li><a id="googleLink"><span class="fontawesome-google-plus"></span></a></li>


                    <li>
                        <a id="shareLink" href="#">
                            <span class="fontawesome-linkedin"></span>
                        </a>
                    </li>

                    <li>
                        <a id="mailLink" href="#">
                            <span class="fontawesome-envelope"></span>
                        </a>
                    </li>
                </ul>

            </li>

        </ul>
    </nav>

</body>


 JAVASCRIPT

 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js">
</script>
<script src="https://connect.facebook.net/en_US/all.js">
</script>
<script type="text/javascript">
    var url = document.URL;
    var message = 'Healthcare for free';
    $(document).ready(function () {

        FB.init({
            appId: '247708942243803'
        });
        $('#shareFB').click(function (e) {
            e.preventDefault();
            FB.ui(
            {
                method: 'share',
                name: message,
                href: url,
                caption: message,
                description: message,
                message: '',

            });
        });
    });
</script>

<script>
    <!--Twitter-->
    $('#shareTwit').click(function (event) {
        var width = 575,
            height = 400,
            left = ($(window).width() - width) / 2,
            top = ($(window).height() - height) / 2,
            url = this.href,
            opts = 'status=1' +
                     ',width=' + width +
                     ',height=' + height +
                     ',top=' + top +
                     ',left=' + left;

        window.open(url, 'twitter', opts);

        return false;
    });



    //Google Plus

    $('#googleLink').click(function () {
        $('#googleLink').attr('href', 'https://plus.google.com/share?url=' + url + '');
        window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
        return false;
    });

    //linkedIn


    $('#shareLink').click(function () {
        $('#shareLink').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + url + '&title=' + message + '&source=' + message + '');
        window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;
    });

    //Email

    $('#mailLink').click(function () {
        $('#mailLink').attr('href', 'mailto:?body=' + url + '&subject=' + message + '');

    });

    //Share with friends

    $('.ShareWithFreinds').click(function () {
        ShowDialog('#DivShareWithFreinds', 'Article Share with Freinds');
    });

</script>


CSS
Reset css -   http://meyerweb.com/eric/tools/css/reset/ 

<style type="text/css">
    @charset "utf-8";
    @import url('css/api.css');
    @import url('css/reset.css');

    [class*="fontawesome-"]:before {
        font-family: 'FontAwesome', sans-serif;
    }


    a {
        text-decoration: none;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    .clearfix {
        *zoom: 1;
    }

        .clearfix:before, .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }


    /* ---------- NAVIGATION ---------- */

    nav {
            float: right;
    margin-top: -18px;
    position: fixed;
    margin-left: -17px;
    }

        nav ul {
            background-color: #505664;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            display: inline-table;
            position: relative;
        }

            nav ul li {
                float: left;
            }

                nav ul li a {
                    color: #6daeb0;
                    display: block;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    width: 60px;
                }

                    nav ul li a:hover {
                        color: #fff;
                    }

                nav ul li ul {
                    background-color: #6daeb0;
                    margin-top: 20px;
                    padding: 5px 0;
                    position: absolute;
                }

                    nav ul li ul:before {
                        background-color: #6daeb0;
                        content: "";
                        display: block;
                        height: 8px;
                        left: 26px; /* (nav ul li a { width: 60px; } / 2) - (nav ul li ul:before { width: 8px; } / 2) */
                        position: absolute;
                        top: -4px;
                        transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -webkit-transform: rotate(45deg);
                        width: 8px;
                        z-index: 1000;
                    }

                    nav ul li ul li {
                        float: none;
                    }

                        nav ul li ul li a {
                            color: #fff;
                        }

                            nav ul li ul li a:hover {
                                background-color: #5d9799;
                            }

</style>

Subscribe to: Post Comments (Atom)