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

Antarctic

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

Evert

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! – Spongioblast

escape() is depracated. Use encodeURIComponent() instead. – Abuzz

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

Low

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. – Wilheminawilhide

Answer 3

Use this to have Facebook's api reparse your page

  FB.XFBML.parse();

Febrifugal

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

Parthenos

Thanks for the support and quick reply. Here is the Share Button Code generated by FB.. <div id="fb-root"></div> <script>(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_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> – Antarctic

I need just the html part, not the script. Also wrap your code in ` to format it correctly. – Parthenos

Hi MJ, I have just updated my query.. is that what your are looking for. Please revert – Antarctic

I am unable to get the url value replaced with the above code.. Where am I gone wrong.. Could u please help MJ.. Thanks – Antarctic

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

Baron

i understand the first part that you changed, but do you change the second part? href="" ? – Pierrepierrepont

I just re-wrote the part that i changed, the data-href part. – Baron

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>

Cabrales

This is answer is out of context - the SO has tagged the question with javascript jquery facebook-like facebook-social-plugins – Unjaundiced