Facebook Share Button for Dynamic Url

Question

I have a dynamic page with rewrited url. I want to add a facebook share button in that. So users click on the share button can share the page. But the facebook share developer page is asking for a specific url. Not sure how to share dynamically generated url.

Here some code i found to capture the url. But I dont know, how to include this in facebook code.

jQuery(document).ready(function() {
    var href = jQuery(location).attr('href');
    var url = jQuery(this).attr('title');
    jQuery('#current_title').html(href);
    jQuery('#current_url').html(url);
});

HTML Part of the Facebook Share Button

<div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button"></div>

Kindly help

Many Thanks

score 29 · Accepted Answer · edited Sep 03 '19 at 08:48

This worked for me:

<script language="javascript">
    function fbshareCurrentPage()
    {window.open("https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"&t="+document.title, '', 
    'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
    return false; }
</script>

Then call the code with a link:

<a href="javascript:fbshareCurrentPage()" target="_blank" alt="Share on Facebook">Facebook</a>

If you want it to be a direct link instead of opening in a window, use this in the function:

window.location.href="https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"&t="+document.title;

Possible jquery solution:

<a class="fbsharelink" data-shareurl="YOURLINK">Facebook</a>

$('.fbsharelink').click( function() 
{
    var shareurl = $(this).data('shareurl');
    window.open('https://www.facebook.com/sharer/sharer.php?u='+escape(shareurl)+'&t='+document.title, '', 
    'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
    return false;
});

This is a great simple solution , allowed me to skip all the FB SDK JS setup steps. When using localhost, I noticed it doesn't use the url or title I would try to give it .. it would just show "Localhost" for title and url. I had to actually upload it to see it recognize the actual domain and page title. Anyway .. very cool - Thanks! — Gene Bo, Feb 24 '15 at 20:01
`escape()` is depracated. Use `encodeURIComponent()` instead. — Danny_DD, Sep 03 '19 at 07:12

score 10 · Answer 2 · answered Dec 03 '14 at 13:15

10

Do not enter anything in the URL 'Delete the existing link (https://developers.facebook.com/docs/plugins/) as well and include the code in your page as you would normally do.

Like or share button would pick up the link of your current page

answered Dec 03 '14 at 13:15

Ankush Dhiman

101
1
4

3

works for me. caveat: it grabs the url on page load, so if you're dealing with push state, it won't pick up the url at the time of the click. – tjmcewan Aug 29 '16 at 06:12

score 5 · Answer 3 · answered Feb 03 '16 at 02:20

5

Use this to have Facebook's api reparse your page

  FB.XFBML.parse();

answered Feb 03 '16 at 02:20

Agreene

508
7
16

score 3 · Answer 4 · 2014-01-19T11:06:06.853

3

You can gain the url using

var href = window.location

you can gain the page title using

var title = document.title

No need to use jQuery for those simple tasks.

To make the FB share button dynamic, you will either have to reload or edit the it's data attributes to match the current values. Also after a quick look at the docs for the GB share button, there is no option to set the title just the HREF. Docs can be found here.

So for your example, after you change the url, also run the following code:

jQuery(document).on('ready', function($){
    var url = window.location;  
    $('.fb-share-button').attr('data-href', url);
});

edited Jan 19 '14 at 11:06

answered Jan 19 '14 at 10:47

Thanks for the support and quick reply. Here is the Share Button Code generated by FB..
– Gops Jan 19 '14 at 10:56
I need just the html part, not the script. Also wrap your code in ` to format it correctly. – Jan 19 '14 at 10:58
Hi MJ, I have just updated my query.. is that what your are looking for. Please revert – Gops Jan 19 '14 at 11:01
I am unable to get the url value replaced with the above code.. Where am I gone wrong.. Could u please help MJ.. Thanks – Gops Jan 19 '14 at 12:26

score 1 · Answer 5 · answered Nov 26 '16 at 22:05

I think the simplest solution is this one. And it works for the most complex URLs, let's say this is your URL

http://dramatainment.com/videos.php?v=000014

This is how you will modify your facebook share button code

<div class="fb-share-button" data-href="http://dramatainment.com/videos.php?v=<?php echo $v; ?>" data-layout="button" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdramatainment.com%2Fvideos.php&amp;src=sdkpreparse">Share</a></div>

Just added the dynamic URL like this

data-href="http://dramatainment.com/videos.php?v=<?php echo $v; ?>"

i understand the first part that you changed, but do you change the second part? href="" ? — NewPassionnate, Jan 09 '17 at 20:43
I just re-wrote the part that i changed, the data-href part. — Engr Atiq, Jan 10 '17 at 22:04

score -1 · Answer 6 · answered Jul 28 '20 at 06:29

This can also be done using php

<?php  
     $protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || 
     $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";  
     $CurPageURL = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];  
?>

<div class="fb-share-button" data-href=" <?php $CurPageURL ?> " data-layout="button_count" data-size="large">
   <a target="_blank" 
       href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2F
       <?php $CurPageURL ?>
       %2F&amp;src=sdkpreparse" 
       class="fb-xfbml-parse-ignore">Share
   </a>
</div>

This is answer is out of context - the SO has tagged the question with javascript jquery facebook-like facebook-social-plugins — Alex Leo, Jul 28 '20 at 06:43

Facebook Share Button for Dynamic Url

6 Answers6