CODEWITHSUNDEEP
javascriptjqueryfacebookmodal-dialog
user3196375
user3196375

Reputation: 31

How to add a Facebook "share" button to a "quick view" pop-up modal?

How can I add a Facebook "share" button to a "quick view" pop-up modal? In other words, if somebody wanted to share a product on my site, through the "quick view" modal, how do I have the Facebook "share" button share that products link, since the modal pops up in "/products"?

If you have a look at what I'm talking about and click the "QUICK LOOK" button when you hover over a product:

http://shopmoonfall.bigcartel.com/products

Currently, I have a "like" button, and that isn't what I want, I just want to swap it for a "share" button and have the "share" button on the modal link to the right page properly.

This is what Facebook's share button's Javascript SDK looks like:

<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>

And here's the standard code for the plugin:

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

EDIT*

Here's the current code I'm using for the "like" button:

 <li id="social_facebook">
 <div class="social_action">
    <iframe src="//www.facebook.com/plugins/like.php?href=http://shopmoonfall.bigcartel.com{{ product.url }}&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 80px; height:20px;" allowTransparency="true"></iframe>
  </div>
</li>

Upvotes: 1

Views: 3222

Answers (1)

madebydavid
madebydavid

Reputation: 6527

Ok, try assembling all the pieces to this bit of code which you can use to replace the code you included for the like button:

<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>

<li id="social_facebook">
   <div class="social_action">
    <div class="fb-share-button" data-href="http://shopmoonfall.bigcartel.com{{ product.url }}" data-type="button"></div>
  </div>
</li>

Upvotes: 3

Related Questions