How to put social media buttons to your WordPress site

I guess the SoMe buttons are pretty standard nowadays on any site. Here's how to add the Facebook Like, Tweet and Google +1 buttons.

Twitter

Get the code here.

You can choose between “Share a link”, “Follow”, “Hashtag” and “Mention”. We’ll look at the normal “Share a link” button.

If you didn’t fill in the “share url” and “tweet text” fields it looks something like this (I added the line breaks).




But we want to edit it a bit.

  • If the data-url isn’t there, add it, and put in the current permalink.
  • If the data-text isn’t there, add it, you can add your site name and the post title, or only a post title

It looks something like this (line breaks for readability).




Very straight forward.

Google Plus and Share button

Get it here.

It looks something like this.







This is a no brainer, just paste it in. Read the documentation for more info. You may want to look into the Share button also. And here’s a comprehensive article on the G+ share button.

Facebook

The like button is tad more mysterious. Get it here. Choose the setting to your liking get the html5 button.

Part one: ideally this is added right after the opening of .


Part two: note that you need to change the href value to ID); ?> to make it works on and archive page as well as single page.

Put this where you want the button to appear (I’ve spread it out to multiple lines again for readability).


Putting it in your theme

I’m not big fan of loading SoMe buttons on archive page, if you display, say 10, posts and have three buttons per page, that makes 30 buttons to load. I guess they’re cached and loaded asynchronously and what not. But, it’s more effective that way for sure. You decide.

Good idea is to put all the buttons to a file some-buttons.php and put it into you assets (what ever you call it) folder and include it where ever needed.



I’m a designer and I am a pedant control freak

The buttons won’t fit into my design and ego, how to style them? I read somewhere that you violate the terms of use if you style the like button. You can style the FB share button, though. I guess it’s okay to style others too.

Here’s a function that spews them all out into every single post automatically without changing the templates.


add_filter( 'the_content', 'ilc_share' );
function ilc_share( $conten ) {
  global $post;
  $postlink  = get_permalink($post->ID);
  $posttitle = get_the_title($post->ID);
  $html = '';
  return $content . $html;
}

Here is a modified version where you can print them out where you want.


function ilc_share() {
  global $post;
  $postlink  = get_permalink($post->ID);
  $posttitle = get_the_title($post->ID);
  $html = '';
  echo $html;
}

Use like this . Source.

Now you have a set stylable elements that you can go crazy with.


.share-entry{ /*styles*/ }
.share-entry li{ /*styles*/ }
.share-entry li a{ /*styles*/ }

Conclusions

Get creative somehow, I think users are getting blind to the plug-and-play share buttons. The custom styling may be a good idea.

Club-Mate, the beverage → club-mate.fi