how to get share buttons to use the current URL?

Question

    <a href="http://www.linkedin.com/shareArticle?url=MY_URL" class="in-share-button" target="_blank"> 
<img src="my_img" alt="linkedin share button" title="Share on Linked In" /> </a>

This is currently my share button. I want it to share the url that's currently in the address bar, and not a fixed preset url like it does atm.

I found

<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo $url; ?>

what seems to fit my needs. But when I change "MY_URL" with this it just creates a link to the main page of my website.

The URL it SHOULD display looks like "www.myurl.de/#/id_of_a_post". I feel like the # is the problem. . .

can you provide me any help with this?

Answer 1

It just worked another way.

My friend created a script that saves the ID of the individual posts:

(function(){
    var numbers = document.URL.match(/\d+/g);
                    if(numbers !=  null){
                        $('#right-col').addClass('shown').removeClass('hidden');
                        $('#left-col').addClass('colPositioning');                        
                        $('#right_'+numbers).addClass('shown1');                         
                    ;}
}());

Afterwards I was able to use:

<a href="https://twitter.com/share?url=my_url/%23/?p=<?php the_id();?>" class="twitter-share-button" target="_blank"><img src="img_src"></a>

The trick about it was to replace the # with the "%23". I think it's called encodedURI.

What do you guys think about this solution?

Answer 2

You cannot read the hash portion of the URL in your server side code. The part that follows # is never sent to the server by the browser. So if you're trying to tackle this issue with PHP, you won't get the behavior that you're are expecting.

It looks like you're relying on static links to perform the sharing. I can only answer for Google+, but with Google+ you have two options:

1. Use the Google+ widget rather than a static link and do not specify the HREF parameter:

   <div class="g-plusone" data-annotation="none"></div>
   
   <!-- Place this tag after the last +1 button tag. -->
   <script type="text/javascript">
     (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
   </script>
   

   When the href is not specified and you do not specify a canonical URL, the widget falls back to default to the URL value that comes from document.location.href, which will be your visitor's current page, including the hash portion of the URL.

2. Use JavaScript to rewrite the URLs in your links to append your current hash location, for example, lets assume that you placed all your social links into a div with class "sharing" and then you need to modify all the hrefs within that div using jQuery:

   var hash = document.location.hash;
   // Loop through each link in the sharing div
   $('.sharing a').each(function(){
     // Append the hash to the end of each already populated URL
     $(this).attr('href', $(this).attr('href') + encodeURIComponent('#' + hash));
   });
   

Answer 3

The share might not work exactly the way you think it will. You're using the anchor part of your URL to link to a specific place on your page, and probably using some javascript to then process that and load new or different information, or display/hide other parts of the page, depending on the value of that anchor.

While this works for people who visit your website, it won't work for bots that visit your website (such as the bots used by Facebook and Google+, although I don't know if Linkedin does this as well) which try to get a snippet of information to show as a preview. So while the link itself might work, the preview shown on the website will almost certainly not reflect the contents of the anchored URL.