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=”<?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=”<?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=”<?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’,’’+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!

35 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. mark edwards:

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

    • Ali:

      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 !

  3. Christian:

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

  4. Ash:

    Excellent post, thanks.

  5. 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.

  6. mee:

    Thank you for the code :)

  7. David:


    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,


  8. 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.

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

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

  11. Heather M.:

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

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

  13. Thank you very much, we have in gadgets place by tbree yohng people.
    Everyone’s diggin’ Forever 21.

  14. These wet carpet or upholstery, attach your desired tooll to hzve spills sos nettoyage
    de tapis and dirt. You should also be available. For
    each deal Click on Buy sos nettoyage de tapis now to purchase!
    If a sos nettoyage dde tapis company before you use a cleaning solution wih an assortment of textures.
    After drying, and control technique.

  15. By far the main motivation for deploying cloud solutiins is
    the potential for vital value reductions.

  16. Dangerous Design faculty alternative: I used to be sorry to let him perceive this, however it’s true.

  17. 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.

  18. S.J. Fowler Real Estate, Inc has two centrally located workplaces and houses, phoenix
    homes onn thee market one within the Biltmore space serving thee Camelback hall and better Phoenix.

  19. It’s good to know that after completion off ylur interior design education, you’ll
    bbe able to plan towards the NCIDQ Examinatioon for Interior Designers.

  20. To mzke sure that the roofer will do an excellent job you mus find a home inspector that’s keen to do an inspection on solely the
    roof of your own home.

  21. Sharon:

    What about for Instagram?

  22. 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.

  23. The firm now affords not justt pressure, doctor and dispensary guides, but in addition a powerful archivee of cannabis-related data as effectively.

  24. Faded gloves may also imply that a glove hass been permeated by a chemical; meaning
    that the chemical has been completely absorbed bby the gloves.

  25. Most songs as of late have been covered and tutorialed, everything from The
    Beatles to Ladyy Gaga ukulele covers are on the market

  26. Important information on college grants, loans, scholarships and so on are also
    prpvided by them.

  27. Sal:

    Thee metropolis additionally enjoys competitive charges and
    onne of many very most steady housing markets inside the nation, offering a safe investment even throughout troubled financial occasions.

  28. 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.

Leave a Reply

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