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

December 1, 2011 // 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.

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.

Open your functions.php file and insert this snippet:

<?php
// Get only the image url link by http://blogcastor.com from http://ajtroxell.com
function gangmei_get_the_post_thumbnail_url( $post_id = NULL ) {
    global $id;
    $post_id = ( NULL === $post_id ) ? $id : $post_id;
    $src = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'full');
    $src = $src[0];
    return $src;
}
?>

<?php

// Get only the image url link by http://blogcastor.com from http://ajtroxell.com

function gangmei_get_the_post_thumbnail_url( $post_id = NULL ) {

global $id;

$post_id = ( NULL === $post_id ) ? $id : $post_id;

$src = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'full');

$src = $src[0];

return $src;

}

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.

PHP

<?php echo gangmei_get_the_post_thumbnail_url($post->ID, 'large'); ?>

1

<?php echo gangmei_get_the_post_thumbnail_url($post->ID, 'large'); ?>

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

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink();?>&media=<?php echo gangmei_get_the_post_thumbnail_url($post->ID, 'large'); ?>&description=<?php echo get_the_excerpt(); ?>" onclick="window.open(this.href); return false;">Pinterest</a>

1	<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink();?>&media=<?php echo gangmei_get_the_post_thumbnail_url($post->ID, 'large'); ?>&description=<?php echo get_the_excerpt(); ?>" onclick="window.open(this.href); return false;">Pinterest</a>

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+

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

PHP

<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php the_permalink();?>">Google +1</a>

1

<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php the_permalink();?>">Google +1</a>
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!

Show Comments

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.

Pinterest

Google+

Share this: