Social Media Share Buttons in your web page
I would like to teach you how to use social media's share buttons in your web pages.
In above picture, you can see the share buttons to share your web pages, in the bottom of web pagehttp://www.freeadsimple.com This buttons in web pages used to share the buttons in social medias.
Google Plus Share Button :
To use google share button, Sign in your gmail account first. Then go to https://developers.google.com/+/web/share/ . There are, codes to use google share button in your web pages.
Simple Google plus share button:
Use the below code to put simple share button on your web page.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plus action="share"></g:plus>
Facebook Share button :To put facebook share button on your web page, open your facebook account. https://developers.facebook.com/docs/plugins/share-button/#configurator there are instructions to put facebook share buttons. To use simply facebook buttons in your website
example code like this in head area you should put open graph which is mentioned below in red color. and change the contents according to your website. i.e. OG:URL content should be your page to share.
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<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/en_US/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
Change data-href value should be your website page you should want to share.
Twitter Share button:
To share your web page in twitter sign in your twitter account. Go to share buttons link https://about.twitter.com/cs/resources/buttons and choose a type of button in preview and get code you can click code area and copy with Ctrl+c button and paste it into your website.
To Simply put twitter code the example is given below :
<a href="https://twitter.com/share" class="twitter-share-button" data-url="your web page to share" data-via="your twitter account name" data-size="large" data-dnt="true">Tweet</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>
in the above code the red color text should be changed according to your page to share.
I believe that our web pages will be useful to you. Please continue reading and give support to our pages.
Thank you!
