Here i have developed a demo using bootstrap template. In this demo you see two types of social media sharing without javascript or with javascript.

<ul class="list-inline text-center">
						<li>
							<h1>Custom Social Media Sharing Buttons with JavaScript Code</h1>
						</li>

                        <li>
                            <a href="javascript:void(0)" onclick="javascript:customSocialShare('http://twitter.com/share?text=Custom Social Media Sharing Buttons without JavaScript Code&amp;url=http://www.beingidea.info/custom-social-media-sharing-buttons/')">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="javascript:customSocialShare('http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.beingidea.info%2Fcustom-social-media-sharing-buttons%2F')">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" onclick="javascript:customSocialShare('https://plus.google.com/share?url=http%3A%2F%2Fwww.beingidea.info%2Fcustom-social-media-sharing-buttons%2F')">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-google fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
						<li>
                            <a href="javascript:void(0)" onclick="javascript:customSocialShare('http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fwww.beingidea.info%2Fcustom-social-media-sharing-buttons%2F')">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
						<li>
                            <a href="javascript:void(0)" onclick="javascript:customSocialShare('http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.beingidea.info%2Fcustom-social-media-sharing-buttons%2F&media={http://www.beingidea.info/admin/images/blog/normal/6c636ea5e7445a235ae13d8023431e63.png}')">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-pinterest fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
						<li>
                            <a href="javascript:void(0)" onclick="javascript:customSocialShare('mailto:?subject=Custom Social Media Sharing Buttons&amp;body=Check out this site http://www.beingidea.info/custom-social-media-sharing-buttons/.')">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    </ul>

Popup custom social media script :

function customSocialShare(url){
		window.open(url,'sharer','toolbar=0,status=0,width=648,height=395');
		return true;
	}

The popular social buttons are Facebook Like, Google+ Follow, Tweet Follow, and LinkedIn Follow. In this tutorial, we will discuss how can you open a jQuery dialog window on page scroll and display the social buttons in this popup.