ปุ่มกดไลค์ของ Facebook - จะปิดการใช้งานป๊อปอัปความคิดเห็นได้อย่างไร

107

ฉันต้องการปิดใช้งานช่องแสดงความคิดเห็นที่ปรากฏขึ้นเมื่อผู้ใช้คลิกปุ่ม Facebook (fbml) Like ที่ฉันวางไว้บนไซต์ของฉัน เป็นไปได้ไหมที่จะทำ? ฉันไม่พบรายละเอียดใด ๆ ในเอกสารนี้

facebook facebook-like fbml

— BrynJ
แหล่งที่มา

2

ไม่พบคำตอบสำหรับคุณ คุณได้พิจารณา "Like Box" เป็นการแก้ปัญหาหรือไม่? developers.facebook.com/docs/reference/plugins/like-box คุณสามารถปิด "แสดงสตรีม" และ "แสดงส่วนหัว" และตั้งค่า "การเชื่อมต่อ" เป็น 0 และทำให้มาร์กอัปที่ได้มีขนาดที่เหมาะสม

— zombat

ฉันได้เพิ่มคำตอบที่พบเป็นวิธีแก้ปัญหาชั่วคราว

— BrynJ

125

การแก้ไขที่ง่ายที่สุดในการซ่อนช่องแสดงความคิดเห็นหลังจาก Facebook Like (เวอร์ชัน XFBML ไม่ใช่ iframe one) เป็นไปตามที่กำหนด:

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

ใส่สไตล์ CSS ในไฟล์ CSS ของคุณและดูความมหัศจรรย์มันใช้งานได้ :)

— โมฮัมหมัด Arif
แหล่งที่มา

ขอบคุณโจนาธานแม้ว่าฉันจะไม่ได้เก่งที่สุด :) ฉันพยายามดิ้นรนเหมือนกันและพยายามแก้ไขโดยใช้ CSS แทนที่จะมองหาวิธีแก้ปัญหาที่สวยงามและมันใช้งานได้ 'เหมือนมีเสน่ห์' :)

— Mohammad Arif

8

ไม่มีใครคิดว่าคำตอบของ BrynJ อาจจะดีที่สุด? หาก facebook เปลี่ยนคลาสในมาร์กอัปวิธีนี้จะหยุดทำงาน

— tybro0103

น่าทึ่งยังไม่มีตัวเลือกใด ๆ ซึ่งคุณสามารถปิดใช้งานป๊อปอัปความคิดเห็นได้ ใช้งานได้ดี

— ล้อเลียน

@tybro หากชื่อคลาสเปลี่ยนไปโดยบังเอิญจากจุดสิ้นสุดของ Facebook แน่นอนว่าเราสามารถเปลี่ยนกฎได้อย่างง่ายดายจาก CSS เช่นกันไม่ต้องการการเปลี่ยนแปลงการทำงานใด ๆ นั่นเป็นการแก้ไขที่ง่ายที่สุดในการซ่อนป๊อปอัปความคิดเห็นจนถึง เวลา FB ไม่สามารถกำหนดค่าได้

— Mohammad Arif

14

สิ่งนี้ไม่ได้ผลสำหรับฉัน ณ วันที่ 12 กุมภาพันธ์ 2013 ต้องใช้โซลูชันของ Kotzilla

— Bashevis

81

การใส่ iframe ใน div ขนาดที่เหมาะสมโดยตั้ง overflow เป็น hidden จะช่วยแก้ปัญหานี้ได้ - แม้ว่านี่จะเป็นเพียงการซ่อนปัญหาเท่านั้น

— BrynJ
แหล่งที่มา

5

ตลกกับฉันที่ผู้ชายคนอื่นได้รับการโหวตทั้งหมด บางทีวิธีการของเขาอาจช่วยประหยัดเวลาได้สามนาที แต่ถ้า facebook เปลี่ยนคลาสมันจะพัง

— tybro0103

@tybro คุณสามารถเพิ่มคลาสลงในแท็ก fb และจัดรูปแบบได้ดังนั้น fb การเปลี่ยนคลาสจะไม่มีผลกับโค้ดของคุณ

— Gangesh

1

@Gangesh อืมไม่ไหวแล้ว มาร์กอัปมาจาก Facebook โดยตรงซึ่งคุณไม่สามารถควบคุมได้

— tybro0103

@ tybro0103 ฉันได้เพิ่มวิธีการที่จะไม่หยุดแม้ว่า FB จะเปลี่ยนคลาส

— Zorox

ขอบคุณมาก @BrynJ

— Abhishek

69

ฉันใช้สิ่งนี้ใน CSS ของฉัน:

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

และแสดงปุ่ม Facebook ด้วยโค้ด HTML5 ปกติดังนี้:

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

ก -

— เอลเมอร์
แหล่งที่มา

4

หลังจากลองใช้วิธีแก้ปัญหาอื่น ๆ วิธีนี้ได้ผลดีที่สุด iframe ไม่เหมาะเพราะฉันต้องการสมัครสมาชิก edge.create เหตุการณ์ การแสดงผลแท็ก div ใน edge.create ตัวจัดการเหตุการณ์มีความล่าช้าเล็กน้อย โซลูชัน CSS อื่นที่ใช้ ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr" ก็ใช้ไม่ได้สำหรับฉันเช่นกัน

— CodeWarrior

นี่เป็นคนเดียวที่ทำงานให้ฉันด้วย ฉันใช้ iframe ที่ไม่ใช่วิธีการฝัง

— TK123

4

ใช้งานไม่ได้จริง ๆ (ม.ค. 2014) มันไม่ได้ปิดใช้งานช่องแสดงความคิดเห็น แต่เพียงแค่ซ่อนมันไว้ หากคุณกดปุ่มLike (โปรดระมัดระวังในการรีเฟรชหน้าของคุณหลังจากที่ไม่ชอบลิงก์ที่คุณกำลังทดสอบ) จากนั้นเริ่มพิมพ์<div>ขนาดจะยังคงเท่าเดิม แต่จะแสดงช่องป้อนข้อความจากนั้นกดแท็บและปุ่มปิดและโพสต์จะปรากฏให้เห็น . ไม่ดี. ฉันกำลังทดสอบกับ Firefox

— Annabel

yeeeaaahh วิธีนี้ได้ผลจริงขอบคุณ !!

— Michael

14

สิ่งที่ฉันทำคือใส่ div สำหรับปุ่ม "like" ดังนี้:

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

— Kotzilla
แหล่งที่มา

4

นี่เป็นวิธีแก้ปัญหาที่ดีที่สุดที่ฉันพบ หากคุณใช้เค้าโครงนับกล่องให้ใช้ CSS ต่อไปนี้: .fb-like {overflow: hidden; ความสูง: 61px; } คุณจะเห็นรอยบากเล็ก ๆ เหนือปุ่มไลค์ แต่คุณจะไม่รู้สึกรำคาญกับป๊อปอัปโง่ ๆ นี้อีกต่อไป

— NicolasBernier

สำหรับธีมน้อยที่สุดของ Shopify การใช้ div การตัดนี้ใช้ได้ทั้งบนเว็บและมือถือในขณะที่เพียงแค่แทนที่คลาสที่เหมือน fb ซึ่งทำงานโดยตรงบนเว็บ แต่ไม่ใช่มือถือ (เนื่องจากมีการรวมคลาสเฉพาะสื่อเพิ่มเติม)

— gamozzii

9

ฉันชอบวิธีแก้ปัญหาของ Mohammed Arif และฉันเลือกเป็นคำตอบที่ดีที่สุด แต่ในกรณีที่ 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

— โซร็อกซ์
แหล่งที่มา

4

ฉันใช้วิธีนี้เพราะด้วยสไตล์ css ฉันไม่สามารถซ่อน div ใน iframe ได้

— Pons

นี่เป็นเรื่องที่ชาญฉลาดจริงๆอย่างไรก็ตามช่องแสดงความคิดเห็นสามารถเห็นได้ในช่วงเวลาสั้น ๆ

— pinkdawn

1

ฉันจะไม่เรียกสิ่งนี้ว่าเป็นโซลูชันที่ "ชาญฉลาดจริงๆ" - มันเกี่ยวข้องกับการลบมาร์กอัปปุ่ม Like (แต่การกำหนดโค้ดการจัดการเหตุการณ์บางส่วนออกไป) การเพิ่มใหม่ใน DOM การแยกวิเคราะห์ DOM สำหรับ XFBML ของทั้งหน้าและการสร้าง ปุ่ม Like ใหม่ซึ่งหมายถึงตัวจัดการเหตุการณ์เพิ่มเติมการทาสีและการจัดเรียงใหม่คำขอใหม่บางส่วน ฯลฯ จริงๆแล้วฉันจะเรียกสิ่งนี้ว่าวิธีแก้ปัญหาที่ไม่ดีหรืออาจจะไม่ใช่วิธีแก้ปัญหาเลยเนื่องจากสิ่งที่คุณทำก็เหมือนกับการอัปเกรดเบราว์เซอร์ของคุณโดย ซื้อคอมพิวเตอร์เครื่องใหม่

— AndrewF

1

มีความคิดที่ดีกว่านี้หรือไม่? ช่องแสดงความคิดเห็นที่น่ารังเกียจนั้นจะไม่หายไปเป็นอย่างอื่น

— Amalgovinus

@AndrewF - คิดว่าดีกว่ามั้ย?

— Jeremy Haile

5

แก้ปัญหาการทำความสะอาดที่ทำงาน ( ณพฤษภาคม 2014 ) -

ก่อนอื่นตรวจสอบให้แน่ใจว่า<div class="fb-like" มีคุณสมบัติโครงร่างข้อมูลเป็นปุ่ม -
```
<div class="fb-like" data-layout="button"........></div>
```
เพียงแค่เพิ่ม CSS นี้
```
.fb-like{
   overflow: hidden !important;
}
```

แค่นั้นแหละ!

การสาธิต

— ซาฮิลมิตตัล
แหล่งที่มา

4

จะไม่เป็น Debby Downer ที่นี่ แต่การซ่อนช่องแสดงความคิดเห็นไม่ได้ละเมิดนโยบายของ Facebook หรือไม่?

IV. จุดรวมแอปพลิเคชัน d. คุณต้องไม่ปิดบังหรือครอบคลุมองค์ประกอบของปลั๊กอินโซเชียลของเราเช่นปุ่มไลค์หรือปลั๊กอินกล่องไลค์

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

— แดเนียลครูเกอร์
แหล่งที่มา

1

นั่นไม่ได้ให้คำตอบสำหรับคำถาม กรุณาหมายเหตุเพิ่มเติมเป็นความคิดเห็น

— Trinimon

2

ที่น่าขัน - มันคือช่องแสดงความคิดเห็นที่ซ่อนปุ่มชอบของฉันไว้ !!

— Amalgovinus

3

ฉันไม่สามารถรับdisplay: noneตัวเลือกให้ทำงานกับปุ่มเวอร์ชัน HTML 5 ได้ แต่ฉันกำหนดเป้าหมาย div ว่าปุ่ม like ถูกสร้างขึ้นและตั้งค่า overflow เป็น hidden

การทิ้งสิ่งต่อไปนี้ในไฟล์ css หลักของฉันเป็นการหลอกลวง:

#fb_button{
    overflow:hidden;
}

— การจำลอง
แหล่งที่มา

3

เห็นด้วยกับ BrynJ ทางออกที่ดีที่สุดในปัจจุบันคือการใส่ปุ่ม like ในคอนเทนเนอร์ div สูง 20px และตั้งค่า overflow เป็น hidden (ฉันอ่านที่ไหนสักแห่งที่ 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 20px เป็นโซลูชันเดียวที่ใช้งานได้

— Bashevis

2

หากปุ่มไลค์หายไปเมื่อคุณคลิก "like" และคุณมีคอนเทนเนอร์ div เพื่อซ่อนป๊อปอัปข้อคิดเห็นให้ใช้วิธีแก้ไขปัญหาต่อไปนี้:

สร้างคอนเทนเนอร์ div เพื่อวางปุ่มเหมือน fb และให้ css ต่อไปนี้:

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

.fb_like iframe {
  left: 0 !important;
}

— MaxK
แหล่งที่มา

2

ฉันจัดการเพื่อหลีกเลี่ยงปัญหาป๊อปอัพความคิดเห็นของปุ่มชอบ Facebook โดยใช้เวอร์ชัน IFRAME แทน ฉันทำตามขั้นตอนต่อไปนี้:

ไปที่https://developers.facebook.com/docs/plugins/like-button/
เปลี่ยน 'URL เป็น Like' เป็น URL เพจ Facebook ของคุณ
เลือกตัวเลือกอื่น ๆ (Layout, Action Type ฯลฯ ) ตามต้องการ
กดปุ่ม 'รับรหัส'
เลือกเวอร์ชัน IFRAME
ตรวจสอบให้แน่ใจว่าคุณได้เลือกแอปพลิเคชัน Facebook ที่มีข้อความว่า 'สคริปต์นี้ใช้รหัสแอปของแอปของคุณ'
ติดตั้งโค้ดที่ให้ไว้ในแอปพลิเคชันของคุณ

จากสิ่งที่ฉันเห็นปุ่ม like ที่ใช้ IFRAME ไม่เรียกป๊อปอัปใด ๆ มันทำหน้าที่เป็นปุ่มไลค์ นี่คือผลลัพธ์ที่ฉันต้องการ

โชคดี.

— ชย ณ รังค์
แหล่งที่มา

หากคุณไม่ต้องการผู้ฟังเหตุการณ์นี่คือคำตอบที่เป็นทางการที่ดีที่สุด ขอบคุณค่า !!

— Yahel

1

นี่คือรหัสเพื่อให้ปุ่ม 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&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>

— ราฟาเอล
แหล่งที่มา

ดีนี่เป็นทางออกที่ดีที่สุดที่ฉันลองจากหน้านี้ ขอบคุณอีกครั้ง @Rafael

— Stuart

1

มาลองอันนี้:

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

— Aamir Afridi
แหล่งที่มา

1

ตามที่ฉันได้ทำตกลงป๊อปอัปความคิดเห็นจะถูกปิดใช้งานเมื่อ:

แสดงใบหน้า: -> ยกเลิกการเลือก
รับรหัส: -> เลือกตัวเลือก IFRAME

— TrựcPhạm
แหล่งที่มา

1

หากคุณใช้ปุ่ม HTML5 ที่ใหม่กว่าและคุณควรจะใช้งานร่วมกันได้และแนะนำโดย Facebook มันเป็นเรื่องง่ายที่จะหลีกหนีจากสิ่งที่คนอื่นพูด:

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

คลาสที่สองเป็นโบนัสสำหรับผู้ที่ใช้ปลั๊กอิน AddThis

— บิลไพรรักธาริศ
แหล่งที่มา

0

show-faces=trueตัวเลือกล้นความสูงดังกล่าวข้างต้นไม่ควรใช้เมื่อ มิฉะนั้นจะปิดบังใบหน้า

— tleo
แหล่งที่มา

0

ในกรณีของฉัน (ด้วยเวอร์ชัน 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>

มันซ่อนป๊อปอัปความคิดเห็นอย่างถูกต้อง

— jollyr0ger
แหล่งที่มา

0

การซ่อนช่องแสดงความคิดเห็นจะใช้งานได้ แต่อาจสร้างปัญหาได้หากคุณมีองค์ประกอบที่คลิกได้หลังกล่องแสดงความคิดเห็น

คุณต้องซ่อนและลบออกจากโพสต์ DOM เช่น

นี่คือ CSS สำหรับซ่อนช่องแสดงความคิดเห็น:

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

นี่คือวิธี JQuery ในการลบองค์ประกอบ DOM:

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

— Stephane Brillant
แหล่งที่มา

ฉันควรสร้างกฎ css สำหรับเนื้อหา iframed บนโดเมนอื่นได้อย่างไร นับประสาอะไรกับคลาส css ที่ชื่อจะต่างกันในเดือนหน้า?

— Amalgovinus

0

หากคุณต้องการแสดงเฉพาะปุ่มไลค์คุณอาจลองทำสิ่งนี้

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

— user0000001
แหล่งที่มา

0

การตั้งค่า overflow เป็น hidden อาจช่วยได้ ทำในไฟล์ css หลัก ..

#fb_button{
overflow:hidden;
}

— Akshat
แหล่งที่มา

0

วิธีทำให้ iframe ที่มีปุ่ม like มีขนาดเท่ากับปุ่ม:

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

แค่นั้นแหละ.

— Graham McLellan
แหล่งที่มา