Add Pinterest and Google+ Sharing to Your Website (w/o Javascript)

2011-12-01 // In Articles, Tutorials

For a lot of people this may be common knowledge, but if you are interested in having share “buttons” or “links” for Pinterest and/or Google+, the solution can be a bit hard to find. For pinterest, I found the solution myself, but for Google Plus, I cannot take the credit as it goes to this post.
If you have any questions or want the link format for any other social sharing website post in the comments and I will place it here as well. Here are the solutions.

Pinterest

  1. Because of Pinterest needing to pull an image for each article or resource that is pinned, you will need to edit your theme so that it supplies your post thumbnail URL. You may already know how to do this on your own, but if not Blogcastor has a great tutorial on how to do so. But I will reiterate it here.
  2. Open your functions.php file and insert this snippet:

  3. After saving this, you can now use the following tag to insert the URL of your post thumbnail anywhere in your theme files. You can specify what size variant of your thumbnail you would like to use by changing the text “large” to any other size you have for post thumbnails.

  4. Now you can place the following code in the loop for each post, allowing visitors to pin your posts to Pinterest.

  5. Your Pinterest share link now contains a link to your article, the link to the image associated with your article, and the excerpt with paragraph tags removed.

Google+

  1. Up until recently there has been no way of putting a share link for Google+ on your site without using the Javascript version. For many people, including myself, this is a pain because we don’t want visitors to have to rely on Javascript to be able to Plus 1 an article we have written.
  2. However, now their is a solution. I can’t recall where I initially found this, but you can view another reference to it here.
    All you need to include in your theme is this snippet:

  3. Now your visitors can Plus 1 your articles without you having to use Javascript.

Just like any solution, these aren’t necessarily the way these sharing links were intended to be used, without Javascript that is. And chances are most of your visitors have Javascript enabled so you probably wouldn’t run in to any trouble. I however, do not want to use any more Javascript than I have to.

Because of that fact, I have to make some compromises. Any of my share links take my visitors to another page, away from my site, which could hurt my visits a little, since they may share the link and then simply navigate away from and not come back. Yet, I do not have to load the specific Javascript file from each of these services which saves me some load time.

I guess I could have each link load the page in a modal window that is already a component of the Lightbox script that I use. Then I would not be using any more Javascript than I already do, but it would be a cleaner solution and keep visitors on the site. I see another article coming!

Discussion

  • joel

    hi there,

    great tutorial here. quick question. for step 3, does this need to be done on any 1 page? or on the blog page? if i’d like to add the button on other static pages as well as the blog, do i need to add the code on these pages too?

    thanks,

    joel

    • http://ajtroxell.com AJ

      I’m not sure which step three you are references, but i’m assuming it’s for Google+.

      The “the_permalink” tag references the current post or page. So you would have to include it in each template that you want the Google+ link to show on. For your home page, since your loop repeats for each post it would just be put down once. But if you want it to show on your individual post page, or a “page” page, then yes you would have to place it in that template file as well.

      Of course, you would always create a separate template file called “share.php” or something like that with your sharing code (facebook, twitter, google+ etc…) inside of it, and just include that template, using a php include, on every page you want people to be able to share. Then you can just edit one file from now on and be able to tweak the sharing links on all pages.

      I hope that answered your question.

  • http://bestopinterest.blogspot.com Pinterest Invites

    Thank you for sharing, i will check here more often .

  • http://fidoloves.com Jay Stebbins

    Hey AJ, thank you for the tutorial on hardcoding and grabbing the image for sharing on the social networks. Is there a way to adapt you code to include grabbing the image from “Pages”? I enabled featured images on my pages, but Google+ is not picking up the image.

    Thank you,

    Jay

    • http://ajtroxell.com AJ

      Unfortunately there isn’t a way to specify an image using this method. The only parameters accepted by the share link is the URL itself. Hopefully this is something they will implement in the future.

    • http://ajtroxell.com AJ

      Correction to my previous answer. You can however, implement an og:image tag in your head that is set to the pages featured image. Thusly Google+ will pull this for the thumbnail. More info here: http://stackoverflow.com/questions/6628201/google-1-generated-thumbmail-in-profile/6679700#6679700

      • http://fidoloves.com Jay Stebbins

        AJ, thank you for looking into this. I miss the stack overflow article as I was searching for a solution. I am trying to get my site as google/social network friendly as possible. I have been experimenting with item-prop plugins as well.

All content copyright © 2009-2014 AJ Troxell. All rights reserved.