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!
