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

Answer 1

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;
});

Answer 2

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

Answer 3

Use this to have Facebook's api reparse your page

  FB.XFBML.parse();

Answer 4

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);
});

Answer 5

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; ?>"

Answer 6

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>