Reputation: 31
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 }}&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=lucida+grande&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 80px; height:20px;" allowTransparency="true"></iframe>
</div>
</li>
Upvotes: 1
Views: 3222
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