Я бы хотел отключить поле для комментариев, которое появляется, когда пользователь нажимает кнопку «Нравится» в Facebook (fbml), которую я разместил на своем сайте. Возможно ли это сделать? Я не могу найти подробностей в документации.
Я бы хотел отключить поле для комментариев, которое появляется, когда пользователь нажимает кнопку «Нравится» в Facebook (fbml), которую я разместил на своем сайте. Возможно ли это сделать? Я не могу найти подробностей в документации.
Ответы:
Простейшее исправление, позволяющее скрыть поле комментария после лайка Facebook (версия XFBML, а не версия iframe):
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Поместите стиль CSS в любой из ваших файлов CSS и посмотрите на волшебство, оно работает :)
Помещение iframe в div подходящего размера с установкой переполнения на скрытую разрешило эту проблему, хотя на самом деле это только скрывает проблему как таковую.
Я использую это в своем CSS:
.fb-like{
height: 20px;
overflow: hidden;
}
и отобразите кнопку Facebook обычным кодом HTML5, примерно так:
<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>
гр-
<div>
размер останется того же размера, но отобразится текстовое поле, затем нажмите вкладку, и кнопки « Закрыть» и « Опубликовать» станут видимыми. . Не хорошо. Я тестировал Firefox.
Я создал блок div для кнопки «Нравится» следующим образом:
<div class="fb_like">
<fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>
А это CSS:
.fb_like {
overflow: hidden;
width: 90px;
}
Мне нравится решение Мохаммеда Арифа, и я выбираю его как лучший ответ. Но если FB изменил классы, то всегда будет работать следующее ..
FB.Event.subscribe('edge.create', function(response) {
$('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
FB.XFBML.parse();
});
где "like_button_holder" - это "ВАШ" идентификатор div, содержащий код кнопки Like facebook.
Более чистое решение, которое работает (по состоянию на май 2014 г. ) -
Прежде всего , убедитесь , что <div class="fb-like"
имеет данные макет свойство , как кнопка -
<div class="fb-like" data-layout="button"........></div>
Просто добавьте этот CSS-
.fb-like{
overflow: hidden !important;
}
Это оно!
Не быть здесь Дебби Даунер, но не скрыть поле для комментариев нарушает Политику Facebook?
IV. Точки интеграции приложений d. Вы не должны скрывать или скрывать элементы наших плагинов социальных сетей, такие как кнопка Like или плагин Like box.
Согласитесь с BrynJ, лучшим решением в настоящее время является размещение кнопки Like в контейнере div высотой 20 пикселей и установка скрытого переполнения (я где-то читал, что FB недавно переместил всплывающее окно комментариев в iFrame, поэтому решение, которое изменяет стиль . fb_edge_widget_with_comment , вероятно, больше не полезен для пользователей iFrame).
Используете AddThis? Сделай это:
<div class="container" style="height: 20px; overflow: hidden;">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like"></a>
</div>
</div>
Если кнопка «Мне нравится» исчезает, когда вы нажимаете «Нравится», и у вас есть контейнер div, чтобы скрыть всплывающее окно с комментарием, используйте следующее решение:
создайте контейнер div, чтобы разместить в нем кнопку в стиле fb, и присвойте ему следующий css:
.fb_like {
overflow: hidden;
width: 90px;
}
.fb_like iframe {
left: 0 !important;
}
Мне удалось обойти проблему с всплывающими комментариями кнопки «Нравится» в Facebook, реализовав вместо этого версию IFRAME. Для этого я предпринял следующие шаги:
Насколько я могу судить, кнопка Like с реализацией IFRAME не вызывает всплывающих окон. Она просто работает как кнопка «Нравится». Это был мой желаемый результат.
Удачи.
Вот код, чтобы кнопка Like работала как стандартная кнопка вместе с Twitter и Linkedin. Надеюсь, поможет.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB</title>
<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; }
.social ul li { float: left; margin-right: 10px; }
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="social">
<ul>
<li class="facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe>
</li>
<li class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.smh.com.au" data-count="none">Tweet</a>
</li>
<li class="linkedin">
<script type="IN/Share" data-url="http://www.smh.com.au/"></script>
</li>
</ul>
</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&appId=333450970117655";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
</body>
</html>
Давайте попробуем это:
FB.Event.subscribe('edge.create', function(response) {
var $parent = $('[href="'+response+'"]').parent();
$parent.empty();
$parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
FB.XFBML.parse();
});
Если вы используете более новую кнопку HTML5, и вы должны, поскольку она является прямой совместимой и предложенной Facebook, это легко, исходя из того, что говорили другие:
.fb-like, .addthis_button_facebook_like
height: 25px
overflow: hidden
Второй класс - бонус для тех, кто использует плагин AddThis.
В моем случае (с версией XFBML) я добавил в тег следующее:
width="90" height="20" style="overflow: hidden;"
Итак, конечный результат:
<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>
Он правильно скрывает всплывающее окно с комментарием.
Скрытие поля комментариев работает, но может создать проблему, если за всплывающим полем комментария есть интерактивный элемент.
Вы должны скрыть это и удалить из сообщения DOM вроде.
Вот CSS, чтобы скрыть поле комментария:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Вот способ удаления элемента DOM с помощью JQuery:
FB.Event.subscribe('edge.create', function (href, widget) {
$('.fb_edge_comment_widget.fb_iframe_widget').remove()
});
Вот чистый способ javascript с использованием предоставленного виджета из обратного вызова:
FB.Event.subscribe('edge.create', function (href, widget) {
widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);
});
Если вы хотите отображать только кнопку «Нравится», попробуйте что-то вроде этого
HTML:
<div class="fb_like">
<div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
<div class="like_counter_hider"></div>
</div>
CSS:
.fb_like {
overflow: hidden;
width: 80px;
height: 20px;
}
.like_counter_hider {
position: absolute;
top: 0;
left: 45px;
width: 35px;
height: 20px;
background-color: #f3f3f3; /*you'll have to match background color*/
z-index: 200;
}
Как насчет того, чтобы просто сделать iframe, который содержит похожую кнопку, того же размера, что и кнопка:
.fb_iframe_widget_lift
{
width: 49px !important;
height: 20px !important;
}
Вот и все.