CODEWITHSUNDEEP
javascriptjqueryfacebook-likefacebook-social-plugins
Gops
Gops

Reputation: 697

Facebook Share Button for Dynamic Url

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

Upvotes: 20

Views: 68602

Answers (6)

Joshua Rifareal
Joshua Rifareal

Reputation: 1

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>

Upvotes: -1

wentz
wentz

Reputation: 700

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

Upvotes: 29

Engr Atiq
Engr Atiq

Reputation: 163

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

Upvotes: 1

Agreene
Agreene

Reputation: 538

Use this to have Facebook's api reparse your page

  FB.XFBML.parse();

Upvotes: 5

Ankush Dhiman
Ankush Dhiman

Reputation: 101

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

Upvotes: 10

user916411
user916411

Reputation:

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

Upvotes: 3

Related Questions