Software Developer

Social Media Share Buttons Without JavaScript For WordPress

These are social media sharing buttons with NO JavaScript for WordPress single posts. This example includes a Google+ share link, a Twitter Tweet link, a Facebook share link, and a Pinterest “Pin it” link, all without JavaScript. Place the following HTML in your single.php where you want the buttons to appear. This also works in the sidebar for single posts.

<a target="_blank" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" class="simple-share ss-gplus" title="Share on G+" rel="nofollow">G+ Share</a>

<a target="_blank" href="https://twitter.com/share?text=<?php echo urlencode( get_the_title() ); ?>" class="simple-share ss-twitter" title="Tweet" rel="nofollow">Tweet</a>

<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" class="simple-share ss-facebook" title="Share on Facebook" rel="nofollow">Share</a>

<a href="http://www.pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=<?php if(has_post_thumbnail()) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo urlencode( get_the_title() . ' - ' . get_permalink() ); ?>" class="simple-share ss-pinterest" target="_blank" rel="nofollow">Pin It</a>

You also need to add the following CSS to your stylesheet to make the button links take the color of their brands:

.simple-share {
    margin:10px 5px;
    line-height: 1;
    color:#fff;
    padding:3px 6px;
    text-decoration:none;
}
.simple-share:hover{
	color:#fff;
	text-decoration:none;
}
.simple-share.ss-facebook {
    background-color: #3B5998;
}
.simple-share.ss-twitter {
    background-color:#00aced;
}
.simple-share.ss-gplus {
    background-color:#dd4b39;
}
.simple-share.ss-pinterest {
    background-color:#cb2027;
}

Variation

To add hashtags to the Tweet link, change the Tweet link from the HTML above, which looks like this:

<a target="_blank" href="https://twitter.com/share?text=<?php echo urlencode(get_the_title()); ?>" class="simple-share ss-twitter" title="Tweet" rel="nofollow">Tweet</a>

to this:

<a target="_blank" href="https://twitter.com/share?text=<?php echo urlencode(get_the_title()); ?>&amp;hashtags=hashtag1,hashtag2" class="simple-share ss-twitter" title="Tweet" rel="nofollow">Tweet</a>

Change “hashtag1,hashtag2” to a comma-separated list of your own desired hashtags.

By

We've 4 Responses

    • December 17th, 2014 at 2:58 am

      Yes, first Facebook checks if you added an Open Graph meta tag for an image, which looks like this:

      <meta property="og:image" content="http://domain.com/img/YOUR_IMAGE.png"/>
      

      If no “og:image” tag exists, then it will grab and share the featured image of the page.

      avatar
  1. February 26th, 2016 at 12:35 pm

    good.
    i have added to my website.
    in others themes not work in single.php but works fine in content-single.php.
    my sites already are not so heavy.
    all good for you and and many happy returns.
    thank you.

    avatar

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]