How to use desktop version page url, for mobile site social buttons

Question

I want to use social buttons on my website's mobile version. But the issue i am facing is getting them to use url of desktop version page.

Lets say i have a page "m.domain.com/some-page" with the desktop version url "domain.com/some-page". When i load social buttons they don't show the count that exist for the same page's desktop url.

The share count is getting spread accross mobile and desktop version at present.

I use a php file to lazy load the buttons. Here is the snippet of file header which is followed by buttons scripts:

<?php
$permalink = "http://domain.com" . $_SERVER['REQUEST_URI'];
$title = $_GET['title'] ? $_GET['title'] : $_POST['title'];
?>

But this is not giving me the expected result. The code calling this file is:

<script type="text/javascript">
function get_share_buttons(permalink,title){
    var url = 'http://m.domain.com/folder/shareButtons.php';
    $('#share-buttons').load(url,{permalink:permalink,title:title});
}
$(window).bind("load", function() {
    get_share_buttons('<?php the_permalink() ?>','<?php the_title(); ?>');
});
</script>

Please suggest me a solution to my problem. Thanks.

Answer 1

If you submit the mobile URL ( m.example.com ) for your social links, you will make desktop users click on the mobile URLs. And, like you said, the link statistics will count mobile and desktop domains distinctively.

Better use a universal domain for all external links. Usually, this will be the "desktop" version, eg www.example.com .

In your html head of the mobile version, add a rel="canonical" tag that points to the desktop version. Use the desktop version URL for all social button links.

<link rel="canonical" href="http://www.example.com/"/>

For the visitors (and search engines) visiting the universal/desktop URL, add a rel="alternate" tag on the desktop version that points to the mobile version. You can add device detection by using CSS media queries here:

<link rel="alternate" href="http://m.example.com" media="only screen and (max-width: 1080px)"/>

You can also add further device detection that redirects or offers a link to the mobile version if a mobile device is detected.