Paginated Posts - Social Media Buttons Share First Page URL

Question

I currently have the HTML5 Facebook, Twitter and G+ share buttons inserted into my single.php in WordPress, so it appears on all my post pages.

Everything works great until I write a very long article split into multiple pages using the nextpage tag.

The problem is if the reader is on page 3, and wanted to share the article, when they click the share button, they are prompted to share the URL of that particular page - nameofsite.com/nameofpost/3 and not of the first/main page of the article - http://www.nameofsite.com/nameofpost, so I am left with many post shares for different pages of the same article! Frown | :-(

Is there anyway I can overcome this for all my paginated posts?

Thank you,

James

Edit: I have used the following HTML:

<div class="post-sharing">
 <ul>
  <li class="share-title"><p>Share This Post</p></li>
  <li><div id="fb-root"></div><div class="fb-share-button" data-type="button_count"></div></li>
  <li class="share-twitter"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></li>
  <li class="share-google"><div class="g-plus" data-action="share" data-annotation="bubble"></div></li>
  <li class="share-linkedin"><script src="//platform.linkedin.com/in.js" type="text/javascript">
  lang: en_US
</script>
<script type="IN/Share" data-counter="right"></script></li>
  <li class="share-comments"><a href="<?php comments_link(); ?>"><?php comments_number('No Comments', 'One Comment', '%' );?></a>
</li>
 </ul>
</div>

I have then entered in the following in .js file called nbzsocial.js:

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=225721797619871";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Which I have placed in a js folder in my child theme and enqueued in my functions PHP with this:

function wpse_load_scripts() {
    wp_enqueue_script( 'nbz-social', get_stylesheet_directory_uri() . '/js/nbzsocial.js', array(), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'wpse_load_scripts' );

Thank you for getting back to me so quickly, I have had no luck on the WordPress forums and Stack Overflow!

Answer 1

Is that share javascript getting called before or after the next page tag? Presumably, if its a shortcode, you want to be inserting it after the next page tag?