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

Leave a Reply to Yolo Seo Cancel reply

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]