Aug 28, 2012  •  In Blogging, Geek, Tutorials, Web, WordPress

How to Manually Add Social Media Buttons to the Bottom of Each WordPress Post

Ever since I unveiled my latest blog design, I have received more than a few messages from those who are curious about the social media buttons at the end of each post.

Not sure what I’m talking about? This is what they look like:

(I should also note that when you mouseover each button, it will change colors via a nifty transition effect. Go see for yourself! ;-) )

Now, I know that there exist tons of WordPress plugins for sharing posts. But I also know that oftentimes, these plugins can slow down a site, and/or not have enough customization options for you to display exactly what you want and how you want it.

And this is precisely why I chose to create my own social media buttons, from their designs to their codes…and in this post I will show you how to manually insert your own social media links/buttons to your WordPress theme!

I currently have Facebook, Google+, Twitter, and Pinterest set up under each post. Here is the code I used for my Facebook button:

<a href=”http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>” alt=”Share on Facebook” title=”Share on Facebook” target=”_blank”>Facebook</a>

The words in green can be changed to your needs. (To see the difference between alt and title tags, see here.)

As for the word in purple? This is the actual “Share on Facebook” button. In the code above, I have it so that only the word “Facebook” appears, but you can change that to an alternative text or even an image.

Here is the code you should insert into your theme for a Google+ button:

<a href=”https://plusone.google.com/_/+1/confirm?hl=en-US&url=<?php the_permalink() ?>” alt=”Share on Google+” title=”Share on Google+” target=”_blank”>Google+</a>

The same green and purple words apply here.

Now, for the Twitter button:

<a href=”http://twitter.com/share?text=<?php the_title(); ?> -&url=<?php the_permalink() ?>&via=geekinheels” alt=”Tweet This Post” title=”Tweet This Post” target=”_blank”>Twitter</a>

Once again, the green and purple words represent customizable elements. But what about the pink words? This little snippet ensure that a “via @geekinheels” appears at the end of the tweet. You can leave it out if you’d like. :-)

Lastly, the Pinterest button:

<a href=”javascript:void((function(){var%20e=document.createElement(‘script’); e.setAttribute(‘type’,’text/javascript’); e.setAttribute(‘charset’,’UTF-8′); e.setAttribute(‘src’,’http://assets.pinterest.com/js/pinmarklet.js?r=’+Math.random()*99999999);document.body.appendChild(e)})());” alt=”Pin This Post” title=”Pin This Post” target=”_blank”>Pinterest</a>

The Pinterest button is a bit different from the others. If you click on the Facebook, Google+, or Twitter button, you will be prompted to share the post directly above it. However, if you click on the Pinterest button, you will be prompted to share the page that you are currently on.

How does this create a problem? Let’s say that you have multiple posts on your front page, and a visitor wants to pin one of those posts. But because the contents of your front page will change as you add/delete posts, the URL of the pin may no longer work a few days from now.

Check it out for yourselves. When you click on any of the Pinterest buttons on my front page, you can see that all of the images from the front page can be pinned, and not just the images from the intended post.

The good news is that if the reader clicks on the Pinterest button from an individual post’s page (which is what happens in most cases), the correct URL will be linked. 

Still not loving this solution? There is a workaround to this problem, but it also requires a compromise. The alternate method — which will share the permalink of the intended post and not the current URL — can be found at WPBeginner, but this technique pre-chooses the image to be pinned. In other words, the code dictates that the post’s featured image will be pinned, so if the post contains multiple images the reader has no control over which image gets to be pinned.

I prefer that the reader has a choice, so I chose the first method. But of course you are welcome to choose whichever suits your needs best. :-)

(Why the messy workarounds? Pinterest has yet to release their API, so we are not yet able to have full control over that codes and apps that incorporate this ubiquitous sharing site.) 

I hope this was helpful! Please comment below, or shoot me a message if you have any questions.

And if anyone would like to see other social media buttons added to the bottom of my posts, please let me know!

12 Responses to “How to Manually Add Social Media Buttons to the Bottom of Each WordPress Post”

  1. Ooo la la. I haven’t been over to the blog in awhile and LOVE this layout. Great choice.

  2. Beyond amazing! Thanks.

  3. mark edwards:

    Sorry to sound like a complete dunse, im very new to wordpress. But where abouts to i paste the code?

  4. Christian:

    Did you also build a WordPress function for this? Didn’t see that part mentioned in your code. Can you share perhaps?

  5. Ash:

    Excellent post, thanks.

  6. Del:

    My partner and I stumbled over here by a different web page and thought I might check
    things out. I like what I see so now i am following you.
    Look forward to finding out about your web page repeatedly.

  7. mee:

    Thank you for the code :)

  8. David:

    Hi,

    Thank you very much for the advice ! It works very well.

    But for the “Facebook” button, I only want to know how to change the word “Facebook” by an image. You have told that we can easily do that, but I can’t figure out which code or URL link to add so that it works.

    I thank you in advance for your response,

    David

  9. Is there any chance you would be willing to do a LinkedIn icon/link as well?

    • Sorry, I hardly use LinkedIn (and my blog posts are almost never linked to from LinkedIn) so I don’t really have a reason to do so. However, I’m sure you can find a programmer or even another blog post that details how to create one.

  10. how about any social button youtube, LinkedIn to do as well?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>