How To: Placing Your Social Sharing Buttons On Your WordPress Blog Page

The past few months have been a real exciting time for social sharing! The big players are all working hard to get your love, and with the increased heat, the value proposition has been climbing up.

One piece of the puzzle that can be a challenge is the ability to place your social sharing buttons on both your single posts and your blog page and still have those buttons tracks the number of shares. In this post I will outline how to do it along with providing some of the code for social sharing buttons on your WordPress site.

Social sharing buttons are a great way to encourage your readers to not only share your content, but these buttons can also work as great signals to your readers by providing “social proof” for each post, which in turn should encourage more of your site visitors to read your posts.

Social Sharing Buttons on Gadarian Digital

The Social Sharing Buttons Below Our Titles on Gadarian Digital

If you visit my Digital Planning and Social Media Blog you can see that right after the title of each post I include a number of social sharing opportunities that also show the number of times that post has been shared by that particular service. Within my blog page, these social sharing buttons are also clickable, allowing visitor to share specific content pieces right from my blog.

In order to make those sharing numbers track between my blog page and each individual post I had to use some coding. Now I will show you how to do the same for your WordPress blog. So here goes – a quick “how to” with code snippets included. Depending on the WordPress theme you are using, the placement of these pieces of code will change, but the idea is that you want to place these codes either directly in your blog file or if you utilize hooks then within the place where you would like these social sharing buttons to be viewed on your blog page (after title, before/after excerpt, before/after single post…)

Tweet ButtonTwitter: For more on placing the Tweet button on your site, visit this Twitter Page. Note: you will want to set this up through your own Twitter Account, otherwise after someone shares a piece of your content they will be offered an opportunity to follow @davidgadarian instead of you! Hat Tip to WP Beginner for providing this code originally!

Google +1 Button Google+:For more please visit the official Google +1 site. Hat Tip to Gary and the Folks at Headyway for showing me the light on this one.

Also, with Google +1 you will have to embed a small snippet of code in the header of your site (Update: in the comments section Gary from Headway recommends the footer instead):

Stumble Upon ButtonStumbleUpon: For more on this please visit StumbleUpon’s Badge Page. Hat Tip to WP Code for this one.

Facebook Like and Send ButtonsFacebook: Make sure to visit the official Facebook Like Button Page to get more info on this, and also to get some further customization options that might make sense for your site.

LinkedIn ButtonLinkedIn:For more on this button be sure to visit LinkedIn’s Official Share Button Page. Another Hat Tip to WP Beginner for this one!

Closing Thought Before You Get Started

Before implementing these code snippets on your site make sure to visit each of the actual service pages to customize each button specifically for your site, and as needed make sure you are tracking each button to your company’s website.

With each of these services they offer up the ability to include their share buttons either in a vertical manner or a horizontal manner. That is purely a style choice on your part. For my site I have implemented these buttons using the horizontal setting as I like they they manage to cover the full space of my reading width which means your eye has to cross them at some point, and I also like the horizontal versions as they took up less “above the fold” space on my site.

In addition I’ve written a number of very well received posts in this space including:

If you have not read the above posts, they offer very straight ahead insights both regarding the strategy and placement of your social media buttons.

Have fun with this, and if you feel motivated, your thoughts, comments and additions are always welcome.

6 Responses to How To: Placing Your Social Sharing Buttons On Your WordPress Blog Page

  1. theCodePunk says:

    Quote: “Also, with Google +1 you will have to embed a small snippet of code in the header of your site”

    If you put the javascript in your footer, it will help with page load times.

    • Gadarian says:

      @theCodePunk You’ve only given my great advice in the past so thanks for the comment and also for explaining why! headwaythemes

  2. theCodePunk says:

    Quote: “Also, with Google +1 you will have to embed a small snippet of code in the header of your site”

    If you put the javascript in your footer, it will help with page load times.

  3. Gadarian says:

    @theCodePunk You’ve only given my great advice in the past so thanks for the comment and also for explaining why! headwaythemes

  4. [...] How To: Placing Social Sharing Buttons On Your WordPress Blog Page [...]

  5. [...] How To: Placing Your Social Sharing Buttons On Your WordPress Blog Page - something I feel strongly about. Insightful AND useful (and yes, this is the post I stopped you seeing – until now!) [...]

Get More Great Strategy & Marketing Info
Be Sure To Subscribe

If you like what you've read be sure to subscribe and have powerful Digital Identity Management strategies and tactics sent right to your inbox!

Subscribe with confidence! Read all about our Privacy Policy