A super-light-weight Social sharing button

Hi,

With inline SVG, CSS and JS and the help of sharingbuttons.io, I created below sharing buttons.

image

Size: Less than 3KB (Brotli)

Please have a look and let me know your feedback/suggestion.

CSS

<style>
  .resp-sharing-button__link,
  .resp-sharing-button__icon {
    display: inline-block
  }
  .resp-sharing-button__link {
    text-decoration: none;
    color: #fff;
    margin: 0.5em
  }
  .resp-sharing-button {
    border-radius: 5px;
    transition: 25ms ease-out;
    padding: 0.5em 0.75em;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  .resp-sharing-button__icon svg {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: -2px
  }
  .resp-sharing-button--small svg {
    margin: 0;
    vertical-align: middle
  }
  /* Non solid icons get a stroke */
  .resp-sharing-button__icon {
    stroke: #fff;
    fill: none
  }
  /* Solid icons get a fill */
  .resp-sharing-button__icon--solid,
  .resp-sharing-button__icon--solidcircle {
    fill: #fff;
    stroke: none
  }
  .resp-sharing-button--twitter {
    background-color: #55acee
  }
  .resp-sharing-button--twitter:hover {
    background-color: #2795e9
  }
  .resp-sharing-button--facebook {
    background-color: #3b5998;
    color: #ffffff;
  }
  .resp-sharing-button--facebook:hover {
    background-color: #2d4373
  }
  .resp-sharing-button--google {
    background-color: #dd4b39
  }
  .resp-sharing-button--google:hover {
    background-color: #c23321
  }
  .resp-sharing-button--linkedin {
    background-color: #0077b5
  }
  .resp-sharing-button--facebook {
    background-color: #3b5998;
    border-color: #3b5998;
  }
  .resp-sharing-button--facebook:hover,
  .resp-sharing-button--facebook:active {
    background-color: #2d4373;
    border-color: #2d4373;
  }
  .resp-sharing-button--twitter {
    background-color: #55acee;
    border-color: #55acee;
    color: white;
  }
  .resp-sharing-button--twitter:hover,
  .resp-sharing-button--twitter:active {
    background-color: #2795e9;
    border-color: #2795e9;
  }
  .resp-sharing-button--google {
    background-color: #dd4b39;
    border-color: #dd4b39;
    color: white;
  }
  .resp-sharing-button--google:hover,
  .resp-sharing-button--google:active {
    background-color: #c23321;
    border-color: #c23321;
  }
  /* Remove underline on hover */
  a.resp-sharing-button__link:hover {
    text-decoration: none;
  }
  /* Fix */
  @media (max-width: 420px) {
    .resp-sharing-button {
      font-size: 12px;
    }
    .resp-sharing-button__link {
      margin: 0.2em;
    }
  }
</style>

HTML

<!-- Sharingbutton Facebook -->
<a rel="nofollow" class="resp-sharing-button__link" href="#" title="Share on Facebook" target="_blank" onclick="window.open

('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;" aria-label="Facebook">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-

4z"/></svg></div>Facebook</div>
</a>

<!-- Sharingbutton Twitter, please replace Thegulshankumar with your username -->
<a rel="nofollow" href="#" class="resp-sharing-button__link" target="_blank" 

title="Tweet this article" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + '%20via%20%40Thegulshankumar%20'  + encodeURIComponent(document.URL)); return false;" aria-

label="Twitter">
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 

4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 

18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg></div>Twitter</div>
</a>

<!-- Sharingbutton Google+ -->
<a rel="nofollow" href="#" class="resp-sharing-button__link" target="_blank" title="Share on Google+" onclick="window.open

('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"  aria-label="Google+">
<div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28

-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52

-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 

1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37

-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"/></svg></div>Google+</div>
</a>

Demo: https://gulshankumar.net/wp-content/uploads/2018/05/share-buttons-1.html

How to use it?

  • Add HTML code in the widget, CSS in the Custom CSS option, and update Twitter username.

Thanks & Regards,
Gulshan

10 Likes

nice work :heart_eyes:

1 Like

right now when clicked sharing page is opening in new tab

can you make it open in new window with small dimension window size … 750x500px will be good.

1 Like

Good suggestion. :slight_smile: Will think about it.

Thanks

1 Like

When user finish sharing, currently it automatically closes the new-tab. It keeps full concentration for sharing.

What if pop-up would be blocked?

But it jumps to new tab… i personally feel that bad

check these big sites

https://www.quicksprout.com/2018/05/02/how-to-monitor-your-competitors-with-these-10-helpful-tools/

https://www.nytimes.com/2018/05/03/nyregion/nyc-safe-injection-sites-heroin.html?hp&action=click&pgtype=Homepage&clickSource=story-heading&module=first-column-region&region=top-news&WT.nav=top-news

I don’t think this will normally happen… browsers must be using some heuristics to block any popup.

1 Like

At the New York Times website, its share link opens in a new tab.

:open_mouth::thinking::thinking:

my side in chrome its new window of small size…

Kindly add WhatsApp sharing button.

1 Like

Gulshan write a blogpost on this with full explanation. Thousands are searching for this solution. Tools like sharethis or addthis downloads lot of resources which is bad.

You can further enhance it with following options:

  • Floating Placement in left or right
  • Number of shares
2 Likes

Yes, if number of shares can be added then it will be great!! :smile:

2 Likes

Hello guys,
After @GulshanKumar posted this on previous forum, I have been using it on my website. I used Ad-inserter to create two different versions specific for devices.
You can do that too.
On desktop


WhatsApp icon is kinda useless here…

mobile devices
mobile

4 Likes

Looks good with improvement. WhatsApp button can be hidden for desktop with media queries.

1 Like

I’ll remove it from the desktop code :slight_smile:

1 Like

Grear sir :)…
Sir isko use kaise kare?

@Saksham bro apna jugaad best tha :joy::joy:

2 Likes

Nice work @GulshanKumar :slight_smile:

2 Likes

Probably a better option.
Source: Github

I have edited the code and removed other networks and changed the style.

Add this in functions.php or by code snippets plugin:

function assembleWP_social_sharing_buttons($content) {
	global $post;
	if(is_singular('post') || is_home()){

		// Get current post URL
		$assembleWPURL = urlencode(get_permalink());

		// Get current post title
		$assembleWPTitle = str_replace( ' ', '%20', get_the_title());

		// Construct the sharing URLs
		$twitterURL = 'https://twitter.com/intent/tweet?text='.$assembleWPTitle.'&amp;url='.$assembleWPURL;
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$assembleWPURL;
		$googleURL = 'https://plus.google.com/share?url='.$assembleWPURL;

		// Create social sharing ouput at end of the content
		$content .= '<div class="assembleWP-social">';
	  	$content .= '<a class="assembleWP-link assembleWP-facebook" href="'.$facebookURL.'" target="_blank" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i>Facebook</a>';
		$content .= '<a class="assembleWP-link assembleWP-twitter" href="'. $twitterURL .'" target="_blank" rel="nofollow"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</a>';
		$content .= '<a class="assembleWP-link assembleWP-googleplus" href="'.$googleURL.'" target="_blank" rel="nofollow"><i class="fa fa-google-plus" aria-hidden="true"></i>Google+</a>';
		$content .= '</div>';

		return $content;
	}else{
		// don't include sharing if not a post
		return $content;
	}
};
add_filter( 'the_content', 'assembleWP_social_sharing_buttons');

Add this in stylesheet or custom CSS:

.assembleWP-link {
color: white !important;
font-size: 14px;
display: inline-flex;
height: 40px;
justify-content: center;
align-items: center;
	  width:33.33%;
		font-weight: 700;
}

.fa-facebook, .fa-twitter, .fa-google-plus {
	margin-right: 15px;
}

.assembleWP-facebook {
background: #3B5997;
}

.assembleWP-facebook:hover,.assembleWP-facebook:active {
background: #2d4372;
}

.assembleWP-twitter {
background: #00aced;
}

.assembleWP-twitter:hover,.assembleWP-twitter:active {
background: #0084b4;
}

.assembleWP-googleplus {
background: #D64937;
}

.assembleWP-googleplus:hover,.assembleWP-googleplus:active {
background: #b53525;
}

Will look like this & will be automaticllyadded to end of the post.:
image

8 Likes