Facebook Beğen Düğmesi - Yorum açılır penceresini nasıl devre dışı bırakabilirim?

Bir kullanıcı siteme yerleştirdiğim Facebook (fbml) Beğen düğmesini tıkladığında açılan Yorum kutusunu devre dışı bırakmak istiyorum. Bunu yapmak mümkün mü? Belgelerde herhangi bir ayrıntı bulamıyorum.

Facebook Beğen (XFBML sürümü, iframe sürümü değil) verildikten sonra yorum kutusunu gizlemek için en basit düzeltme:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

CSS stilini herhangi bir CSS dosyanıza yerleştirin ve sihri görün, işe yarıyor :)

İç çerçeveyi, taşma gizli olarak ayarlanmış şekilde uygun boyutta bir div'e yerleştirmek bu sorunu çözdü - ancak bu aslında sorunu olduğu gibi gizliyor.

Bunu CSS'mde kullanıyorum:

.fb-like{
    height: 20px;
    overflow: hidden;
}

ve Facebook düğmesini normal HTML5 koduyla şu şekilde oluşturun:

<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>

GR-

Yaptığım şey şunun gibi "beğen" düğmesi için bir div oluşturdu:

<div class="fb_like">
  <fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>

Ve bu CSS:

.fb_like {  
  overflow: hidden;
  width: 90px;
}

Muhammed Arif'in çözümünü beğeniyorum ve en iyi cevap olarak seçiyorum. Ancak FB'nin sınıfları değiştirmesi durumunda, aşağıdakiler her zaman çalışacaktır ..

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", facebook'u düğme kodu gibi tutan "SİZİN" div kimliğidir

Çalışan daha temiz çözüm ( Mayıs 2014 itibariyle ) -

1. Öncelikle data-layout özelliğinin button olarak <div class="fb-like" bulunduğundan emin olun -

   <div class="fb-like" data-layout="button"........></div>
   

2. Sadece bu CSS'yi ekleyin-

   .fb-like{
      overflow: hidden !important;
   }
   

Bu kadar!

gösteri

Burada Debby Downer olmamak, ancak yorum kutusunu gizlemek Facebook Politikasını ihlal etmiyor mu?

IV. Uygulama Entegrasyon Noktaları d. Beğen düğmesi veya Beğen kutusu eklentisi gibi sosyal eklentilerimizin öğelerini gizlememeli veya örtmemelisiniz.

https://developers.facebook.com/policy/

display: noneDüğmenin HTML 5 sürümüyle çalışma seçeneğini alamadım . Bunun yerine, beğen düğmesinin oluşturulduğu div'i hedefledim ve taşmayı gizli olarak ayarladım.

Aşağıdakileri ana css dosyama düşürmek hile yaptı:

#fb_button{
    overflow:hidden;
}

BrynJ ile anlaşın, şu anda en iyi çözüm, beğen düğmesini 20 piksel yüksekliğindeki bir div konteynere koymak ve taşmayı gizli olarak ayarlamaktır (bir yerde FB'nin yakın zamanda yorum açılır penceresini iFrame'e taşıdığını okudum, böylece çözümün stilini değiştirir . fb_edge_widget_with_comment muhtemelen artık iFrame kullanıcıları için yararlı değildir).

AddThis mi kullanıyorsunuz? Bunu yap:

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>

"Beğen" düğmesini tıkladığınızda beğen düğmesi kaybolursa ve yorum açılır penceresini gizlemek için bir kapsayıcı diviniz varsa, aşağıdaki çözümü kullanın:

fb benzeri düğmeyi yerleştirmek için bir kapsayıcı div oluşturun ve aşağıdaki css'yi verin:

.fb_like {
  overflow: hidden;
  width: 90px;
}

.fb_like iframe {
  left: 0 !important;
}

Bunun yerine IFRAME sürümünü uygulayarak Facebook beğen düğmesi yorumu açılır sorununu aşmayı başardım. Bunu yapmak için aşağıdaki adımları attım:

1. Https://developers.facebook.com/docs/plugins/like-button/ adresini ziyaret edin.
2. 'Beğenilecek URL'yi' Facebook sayfanızın URL'si olarak değiştirin
3. Diğer seçenekleri (Düzen, Eylem Türü, vb.) İstediğiniz gibi seçin
4. 'Kodu Al' düğmesine basın
5. IFRAME sürümünü seçin
6. Facebook uygulamanızı 'Bu komut dosyası uygulamanızın uygulama kimliğini kullanır' yazan yerde seçtiğinizden emin olun.
7. Sağlanan kodu uygulamanıza uygulayın

Gördüğüm kadarıyla, IFRAME uygulamasına sahip beğen düğmesi herhangi bir pop-up'ı tetiklemiyor. Basitçe beğenme düğmesi olarak işlev görür. Bu benim istediğim sonuçtu.

İyi şanslar.

İşte Beğen düğmesinin Twitter ve Linkedin ile birlikte standart bir düğme olarak çalışmasını sağlayan kod. Umarım yardımcı olur.

<!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&amp;send=false&amp;layout=button_count&amp;width=45&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;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>

Şunu deneyelim:

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

Tamamladığım gibi, yorum açılır penceresi şu durumlarda devre dışı bırakılacak:

1. Yüzleri göster: -> işaretini kaldırın
2. Kodu Al: -> IFRAME seçeneğini seçin

Daha yeni HTML5 düğmesini kullanıyorsanız ve ileriye dönük olarak uyumlu ve Facebook tarafından önerildiği için, başkalarının söylediklerinden sapmak kolaydır:

.fb-like, .addthis_button_facebook_like
  height: 25px
  overflow: hidden

İkinci sınıf, AddThis eklentisini kullananlar için bir bonus.

Yukarıda belirtilen taşma yüksekliği seçenekleri ne zaman kullanılmamalıdır show-faces=true. Aksi takdirde yüzleri gizleyecektir.

Benim durumumda (XFBML sürümüyle) şu etikete ekledim:

width="90" height="20" style="overflow: hidden;"

Sonuç şu:

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

Yorum açılır penceresini doğru şekilde gizliyor.

Yorum kutusunu gizlemek çalışır, ancak yorum açılır kutusunun arkasında tıklanabilir öğeniz varsa sorun yaratabilir.

Bunu gizlemeniz ve DOM gönderisinden kaldırmanız gerekir.

Yorum kutusunu gizlemek için CSS şu şekildedir:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

DOM öğesini kaldırmanın JQuery yolu:

 FB.Event.subscribe('edge.create', function (href, widget) {        
    $('.fb_edge_comment_widget.fb_iframe_widget').remove()       
});

Geri aramadan sağlanan widget'ı kullanmanın saf javascript yolu:

FB.Event.subscribe('edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});

Yalnızca beğen düğmesini göstermek istiyorsanız, bunun gibi bir şey deneyebilirsiniz

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

Taşma özelliğini gizli olarak ayarlamak yardımcı olabilir. Bunu ana css dosyanızda yapın ..

#fb_button{
overflow:hidden;
}

Beğen düğmesini içeren iframe'i düğme ile aynı boyutta yapmaya ne dersiniz:

.fb_iframe_widget_lift
{
    width: 49px !important;
    height: 20px !important;
}

Bu kadar.