Code to Create Custom Share Buttons for Facebook, Twitter, LinkedIn & Delicious


Interested in sharing your B2B content on Facebook, Twitter, LinkedIn or delicious? Do multi-option social media sharing tools such as ShareThis seem like overkill?

That was our conclusion after researching the social media sites on which readers are most likely to share content from our blog focused on solutions to a wide range of business challenges, What Works for Business. We decided that Facebook, LinkedIn, delicious, and Twitter were the sites on which our target business audience is most likely to share business-related content. Rather than using the ShareThis widget which provides many more options (many confusing options for most of our readers), we decided to create custom share buttons.

To add custom share buttons automatically to each post in a WordPress blog, add the following code to single.php, the file which renders the individual post (note that you must be using WordPress.org, the self-hosted version of WordPress, to be able to customize the php files). See an example of how this looks.

Facebook Share Button Code

Here is the Facebook share code, which can also be found at http://www.facebook.com/share_partners.php/.

<script>function fbs_click() {u=location.href;t=document.title;window.open(‘http://www.facebook.com/sharer.php?u=’+encodeURIComponent(u)+’&t=’+encodeURIComponent(t),’sharer’,’toolbar=0,status=0,width=626,height=436′);return false;}</script><a href=”http://www.facebook.com/share.php?u=<url>” onclick=”return fbs_click()” target=”_blank”><img src=”ADD_IMAGE_URL_HERE” alt=”Share on Facebook” /></a>

Twitter Share Button Code

Here is the Twitter share code, which can also be found at http://www.jhuskisson.com/code-tidbits/share-on-twitter-link.

<a href=”http://twitter.com/home?status=Currentlyreading <?php the_permalink(); ?>” title=”Click to share this post on Twitter””><img src=”ADD_IMAGE_URL_HERE” alt=”Share on Twitter”></a>

LinkedIn Share Button Code

Here is the LinkedIn share code, which can also be found at http://www.linkedin.com/static?key=developers_widget_shareonlinkedin.

<a href=”http://www.linkedin.com/shareArticle?mini=true&url=<?phpthe_permalink(); ?>&title=<?php the_title(); ?>&source=ADD_YOUR_BLOG_URL_HERE”><img src=”ADD_IMAGE_URL_HERE”></a>

delicious Share Button Code

Here is the delicious share code, which can also be found at http://delicious.com/help/savebuttons.

<a href=”http://delicious.com/save” onclick=”window.open(‘http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=’+encodeURIComponent(‘<?php the_permalink() ?>’)+’&amp;title=’+encodeURIComponent(‘<?php the_title() ?>’),’delicious’, ‘toolbar=no,width=550,height=550′); return false;”><img src=”ADD_IMAGE_URL_HERE” height=”20″ width=”20″ alt=”Delicious” /></a>

Good luck, and we’d love to see how you’ve implemented this on your own B2B blog!


View Comments

20 Responses to Code to Create Custom Share Buttons for Facebook, Twitter, LinkedIn & Delicious

  1. Pingback: B2B Social Media Case Study - Business.com | Business.com's B2B Online Marketing Blog

  2. Windenberger says:

    Thanks for the free code. I am almost done gathering all the goodies I need on my upcoming wordpress blog. This post will make it simple to stay focused on the most important social media sites.

  3. Pingback: sigma.squared » Blog Archive » DIY Wordpress Social Media Icons

  4. Bonnie says:

    Is there one button for just these major 4 sites?

  5. James says:

    I think that all the share buttons are so similar, I am looking for a new look.

  6. John says:

    Found your post to be very timely as I was in process of scouring the web for this code – many thanks!

  7. Simon says:

    Great links!!! Thanks for the time saver! The best part of this code is I don’t have to rely on other sites.

  8. RP says:

    You are awesome!!! Thanks for this!

  9. Jesus says:

    Thank you this link is great

  10. Mason says:

    Thanks, great central place to find code for social network integration. We’ve implemented several of these on our site and are seeing an increase in traffic already.

    • ccaldera says:

      Mason,

      That is great news! Glad to hear that these share buttons are making an impact on your traffic. Would you mind sharing how much of increase you are seeing? I’d be interested to know.

      Thanks,
      Cristina

  11. Sunil says:

    Thanks for the code saved lots of valuable time :)

    Thanks
    Sunil

  12. Thanks for the sharing codes, I am going to use it on my real estate analysis website. Cheers!

  13. Biz says:

    Sweet thanks.

  14. Cleiton says:

    Great!

  15. Justin says:

    Thanks! Very helpful!

  16. akeanant says:

    Thanks for the sharing codes.

  17. Jerry says:

    Thanks for posting this. I’m looking at creating a new blog and could use these, this will help a lot.

  18. jillshen says:

    It’s really very useful to me.

  19. Patrick says:

    The only problem with Linkedin. it’a how to add the data counter on the right of the image