Expert Group of programming
Loading...

Custom Social Media Sharing Buttons in HTML

Posted by : Heycode Tech | Posted in : HTML, other, php, programming, Special Feature | Apr 2,2017 | 0 comments

As we know that sharing button is used for getting the more traffic in website. Unfortunately when we are going for implementing it in our website then we got the lot of : JAVASCRIPT : in code. That is the main reason our website becomes slow.

Now here we are describe the sharing button without any JavaScript code.

Our structure
Share links are very standard but have very few code . Simply make an anchor tag that points to a sharing URL of the desired social network on popup with some query parameters to tell the network what to share.

You can customize the sharing structure very easy.

Here we are describing the following sharing URL with lot of feature. These are- Twitter, Google Plus, Facebook, StumbleUpon, Reddit, LinkedIn, and Email share links:

Code for sharing

<!-- Twitter- Customize variable (text,URL) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('http://twitter.com/share?text=<SUMMARY>&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> Share </a>

<!-- Facebook (URL,Title,Summary,Description,Image) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('https://www.facebook.com/sharer.php?u=http://url goes here&summary=<SUMMARY>&title=<TITLE>&description=<SUMMARY>&picture=http://heycodetech.com/wp-content/themes/profound1.0/images/logonew.png','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> Share </a>

<!-- LinkedIn (url, title, summary, source url) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&summary=<Summary>&title=<title>&url=<URL>&source=http://url goes here','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> Share </a>

<!-- StumbleUpon (url, title) -->
<a href="javascript:;" data-layout="button" onclick="window.open('http://www.stumbleupon.com/submit?url=<URL>&title=<TITLE>','heycodetech', 'toolbar=0, status=0, width=650, height=450');">
    StumbleUpon
</a>

<!-- Reddit (url, title) -->
<a href="javascript:;" data-layout="button" onclick="window.open('http://reddit.com/submit?url=<URL>&title=<TITLE>','heycodetech', 'toolbar=0, status=0, width=650, height=450');">
    Reddit
</a>

<!-- Google Plus (url) -->
<a href="javascript:;" data-layout="button" onclick="window.open('https://plus.google.com/share?url=<URL>','heycodetech', 'toolbar=0, status=0, width=650, height=450');">
    Google Plus
</a>

<!-- Email (subject, body) -->
<a href="mailto:?subject=<SUBJECT>&body=<BODY>">
    Email
</a>

Now you can copy this URL and use in own website for share the URL.

Here is the demo of this functionality .

<!-- Twitter- Customize variable (text,URL) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('http://twitter.com/share?text=heycodetext demo &url=http://heycodetech.com/','heycodetech', 'toolbar=0, status=0, width=650, height=450');">Twitter Share </a>

<!-- Facebook (URL,Title,Summary,Description,Image) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('https://www.facebook.com/sharer.php?u=http://heycodetech.com/&summary=heycodetech summary&title=heycodetech title &description=heycodetech description&picture=http://image url goes here','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> Facebook Share </a>

<!-- LinkedIn (url, title, summary, source url) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&summary=heycodetech summary&title=heycodetech title here&url=http://heycodetech.com/&source=http://heycodetech.com/','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> Linked Share </a>

<!-- StumbleUpon (url, title) -->
<a href="javascript:;" data-layout="button" onclick="window.open('http://www.stumbleupon.com/submit?url=http://heycodetech.com/&title=heycodetech title','heycodetech', 'toolbar=0, status=0, width=650, height=450');">
    StumbleUpon Share
</a>

<!-- Reddit (url, title) -->
<a href="javascript:;" data-layout="button" onclick="window.open('http://reddit.com/submit?url=http://heycodetech.com/&title=heycodetech title','heycodetech', 'toolbar=0, status=0, width=650, height=450');">
    Reddit Share
</a>

<!-- Google Plus (url) -->
<a href="javascript:;" data-layout="button" onclick="window.open('https://plus.google.com/share?url=http://heycodetech.com/','heycodetech', 'toolbar=0, status=0, width=650, height=450');">
    Google Plus Share
</a>

<!-- Email (subject, body) -->
<a href="mailto:?subject=heycodetech &body=heycodetech body here.">
    Email
</a>

Customize the style

For styling the button, you can easily add the :Font-awesome , image URL ,etc between the anchor tag and easily add the CSS also.
Like

<!-- Twitter- Customize variable (text,URL) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('http://twitter.com/share?text=<SUMMARY>&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> <i class="fa fa-twitter"></i></a>

<!-- Facebook (URL,Title,Summary,Description,Image) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('https://www.facebook.com/sharer.php?u=http://url goes here&summary=<SUMMARY>&title=<TITLE>&description=<SUMMARY>&picture=http://heycodetech.com/wp-content/themes/profound1.0/images/logonew.png','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> <i class="fa fa-facebook"></i></a>

<!-- LinkedIn (url, title, summary, source url) -->
<a href="javascript: void(0);" data-layout="button" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&summary=<Summary>&title=<title>&url=<URL>&source=http://url goes here','heycodetech', 'toolbar=0, status=0, width=650, height=450');"> <i class="fa fa-linkedin"></i></a>

Similar on other.

So I think that you don’t worry about it.

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and moreHere is the Expert group of programming.