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!

You may also like:

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

  1. Nellie says:

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

  2. Carrie says:

    Beyond amazing! Thanks.

  3. mark edwards says:

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

    • Ali says:

      Well even this is a little bit late but might help others, in your index.php find where the post starts and past these links where u want it … above or bottom !

  4. Christian says:

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

  5. Ash says:

    Excellent post, thanks.

  6. Ash says:

    The Google+ Share Link has changed. Here’s the latest:
    https://plus.google.com/share?url={URL}
    (https://developers.google.com/+/web/share/)

  7. Del says:

    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.

  8. mee says:

    Thank you for the code 🙂

  9. David says:

    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

  10. Taylor Darcy says:

    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.

  11. JBI NguyenVu says:

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

  12. Exactly what I was looking for – and so easy in WordPress. Thank you!

  13. Heather M. says:

    Do you happen to have the code for sharing via email?

  14. Jody says:

    Pour les plus réfractaires, commencer par 5 minutes la première
    semaine mais faites le tous les jours sans exception.

  15. I even hsve a pickup winding machine (I repair quite a lot of vintage Fender and
    Gibson electric guitar pickups) so I’m pleased I could make
    onee that can sound how I want it to.

  16. Sharon says:

    What about for Instagram?

  17. We slept in the Chicago prepare yards that night timme and the ultimate day
    haad us going from Chicago to St. Louis with only a day cocktail, heavy hors d’ouvres occasion.

  18. Florencia says:

    I actually have other probles similar to
    joint paiun andd sonus points and while these haven’t really improved (they might nott bbe linked
    to the adrenal exhaustion), with out all the other issues, I feel I can dal with them.

  19. Norris says:

    You need a product that works on pimples quick natureplex acne treatment cream is a mild solution.

  20. Lawerence says:

    Although bobbleheads are already excellent business Christmas items, it’s still finest to seek out the best materials too
    package deal your gifts.

Leave a Reply

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