Как добавить кнопку «Поделиться» в Facebook во всплывающее окно быстрого просмотра?

Как я могу добавить кнопку «Поделиться» Facebook во всплывающее модальное окно «Быстрый просмотр»? Другими словами, если кто-то хочет поделиться продуктом на моем сайте через модальное окно «быстрый просмотр», как сделать так, чтобы кнопка «Поделиться» в Facebook поделилась ссылкой на этот продукт, если модальное окно появляется в «/products». "?

Если вы посмотрите, о чем я говорю, и нажмете кнопку «БЫСТРЫЙ ПРОСМОТР», когда наведете курсор на продукт:

http://shopmoonfall.bigcartel.com/products

В настоящее время у меня есть кнопка «Нравится», и это не то, что я хочу, я просто хочу поменять ее на кнопку «Поделиться» и правильно разместить кнопку «Поделиться» на модальной ссылке на нужную страницу.

Вот как выглядит Javascript SDK кнопки «Поделиться» в Facebook:

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

А вот стандартный код плагина:

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

ИЗМЕНИТЬ*

Вот текущий код, который я использую для кнопки "Нравится":

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

javascript facebook jquery modal-dialog
person user3196375    schedule 18.01.2014    source источник
comment
Можете ли вы включить код, который вы используете для отображения кнопки «Нравится»? Мы знаем, как включить FB JS SDK из их документации. Чего мы не знаем, так это каких-либо переменных, которые ваш сайт использует для создания кнопок «Нравится», и поэтому нам будет очень сложно показать вам, как включать кнопки «Нравится». в кнопки поделиться.   -  person madebydavid    schedule 19.01.2014
comment
Отредактировал! Посмотрите, чтобы опубликовать подобный код.   -  person user3196375    schedule 20.01.2014

Ответы (1)


arrow_upward
3
arrow_downward

Хорошо, попробуйте собрать все части в этот фрагмент кода, который вы можете использовать для замены кода, который вы включили для кнопки «Нравится»:

<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>
person madebydavid    schedule 20.01.2014
comment
Я вставил это, и теперь кнопка не отображается. Я сделал что-то неправильно? - person user3196375; 20.01.2014
comment
Для меня он отображается на вашей странице, но я думаю, вам, возможно, придется немного повозиться с CSS, чтобы немного выровнять кнопки. Скриншот с моей машины - imgur.com/jeIazm1 - person madebydavid; 20.01.2014
comment
Работает сейчас, на самом деле. Только что проверил еще раз! Но на ФФ не работает. - person user3196375; 20.01.2014
comment
Странно, в FireFox это не так хорошо работает - при первом открытии оверлея Quick look он не отображается - если я его потом закрою и снова открою, то работает - person madebydavid; 20.01.2014
comment
Ты прав. Делает это и для меня тоже. Мы можем что-нибудь сделать? Ха-ха. Это странно. - person user3196375; 20.01.2014
comment
возможно, попробуйте добавить дополнительный javascript: FB.XFBML.parse(); - stackoverflow.com/questions/10222720/ - person madebydavid; 20.01.2014
comment
Добавил это, и он все еще делает то же самое - person user3196375; 20.01.2014
comment
Раньше у меня была кнопка в виде iframe. Должны ли мы вместо этого попробовать сделать это с помощью нового сценария, который вы мне дали, чтобы он работал правильно? - person user3196375; 20.01.2014
comment
Да, попробуйте добавить как iframe — не забудьте использовать http://shopmoonfall.bigcartel.com{{ product.url }} в качестве ссылки, которой вы хотите поделиться. - person madebydavid; 20.01.2014
comment
Можно ли добавить iframe для кнопок «Поделиться»? Ха-ха. Это не говорит о том, что есть вариант. Стрелять. - person user3196375; 20.01.2014
comment
Я думаю, что если вы добавите проблему Firefox в качестве нового вопроса, кто-то еще сможет вам помочь. - person madebydavid; 20.01.2014
comment
Хорошо, но спасибо за помощь! По крайней мере, теперь кнопка делится нужной страницей :) - person user3196375; 20.01.2014