আমি কোনও মন্তব্য বাক্সটি অক্ষম করতে চাই যা কোনও ব্যবহারকারী যখন আমার সাইটে ফেসবুকে (এফবিএমএল) লাইক বোতামটি ক্লিক করেন তখন পপ আপ হয়। এটা কি সম্ভব? ডকুমেন্টেশনে আমি কোনও বিবরণ পাই না।
আমি কোনও মন্তব্য বাক্সটি অক্ষম করতে চাই যা কোনও ব্যবহারকারী যখন আমার সাইটে ফেসবুকে (এফবিএমএল) লাইক বোতামটি ক্লিক করেন তখন পপ আপ হয়। এটা কি সম্ভব? ডকুমেন্টেশনে আমি কোনও বিবরণ পাই না।
উত্তর:
ফেসবুক লাইক (এক্সএফবিএমএল সংস্করণ যদি আইফ্রেমে এক নয়) এর পরে কমেন্ট বক্সটি আড়াল করার সহজ সমাধান দেওয়া হয়েছে:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
আপনার যেকোন সিএসএস ফাইলে সিএসএস স্টাইল রাখুন এবং যাদুটি দেখুন, এটি কাজ করে :)
এই সমস্যার সমাধান করার জন্য ওভারফ্লো সেট করে যথাযথ আকারের ডিভের মধ্যে আইফ্রেমে রেখে দেওয়া - যদিও এটি কেবল সমস্যাটিকে গোপন করে।
আমি এটি আমার সিএসএসে ব্যবহার করি:
.fb-like{
height: 20px;
overflow: hidden;
}
এবং সাধারণ HTML5 কোড সহ ফেসবুক বোতামটি রেন্ডার করুন, এরকম কিছু:
<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>
gr-
<div>
করেন, একই আকার থাকে তবে পাঠ্য প্রবেশের বাক্সটি দেখায়, তারপরে ট্যাব টিপুন এবং ক্লোজ এবং পোস্ট বোতামগুলি দৃশ্যমান হয় । ভাল না. আমি ফায়ারফক্সের সাথে পরীক্ষা করছিলাম।
আমি যা করেছি তা হ'ল "লাইক" বোতামটির জন্য একটি ডিগ্রি ক্রেট:
<div class="fb_like">
<fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>
এবং এটি সিএসএস:
.fb_like {
overflow: hidden;
width: 90px;
}
আমি মোহাম্মদ আরিফের সমাধানটি পছন্দ করি এবং আমি এটি সেরা উত্তর হিসাবে বেছে নিয়েছি। তবে যদি এফবি ক্লাস পরিবর্তন করে, তবে নীচে সর্বদা কার্যকর হবে ..
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();
});
যেখানে "লাইক_বটন_হোল্ডার" বোতাম কোডের মতো ফেসবুক ধারণ করে "আপনার" ডিভি আইডি
ক্লিনার সমাধান যে কাজ (হিসাবে মে 2014 ) -
সব করতে প্রথম নিশ্চিত <div class="fb-like"
হয়েছে ডেটা-বিন্যাস যেমন সম্পত্তি বোতাম -
<div class="fb-like" data-layout="button"........></div>
কেবল এই সিএসএস-
.fb-like{
overflow: hidden !important;
}
এটাই!
এখানে ডেবি ডাউনার হওয়ার কথা নয়, তবে মন্তব্য বাক্সগুলি লুকিয়ে রাখা ফেসবুকের নীতি লঙ্ঘন করে না?
চতুর্থ। অ্যাপ্লিকেশন ইন্টিগ্রেশন পয়েন্ট d। আপনার অবশ্যই আমাদের সামাজিক প্লাগইনগুলির উপাদানগুলিকে অস্পষ্ট বা কভার করবেন না যেমন লাইক বোতাম বা লাইক বক্স প্লাগইন।
display: none
বোতামটির এইচটিএমএল 5 সংস্করণ দিয়ে কাজ করার বিকল্পটি আমি পাইনি । পরিবর্তে আমি ডিভটিকে লক্ষ্য করেছিলাম যে লাইক বোতামের বোতামটি তৈরি হয়েছে এবং ওভারফ্লোটি গোপনে সেট করে।
আমার মূল সিএসএস ফাইলে নিম্নলিখিতটি ফেলে দেওয়া কৌশলটি করেছে:
#fb_button{
overflow:hidden;
}
ব্রায়নজির সাথে সম্মত হোন, সেরা সমাধানটি হ'ল 20px উচ্চ ডিভ ধারকটিতে লাইক বোতামটি রেখে, ওভারফ্লোটি লুকিয়ে রাখা হয়েছে (আমি কোথাও পড়েছি যে মন্তব্যটি এফবি সম্প্রতি আইফ্রেমে স্থানান্তরিত করেছে, তাই সমাধানটি যা স্টাইলকে সংশোধন করে । fb_edge_widget_with_comment সম্ভবত আইফ্রেম ব্যবহারকারীদের জন্য আর কার্যকর হয় না)।
অ্যাডথিস ব্যবহার করছেন? এটা কর:
<div class="container" style="height: 20px; overflow: hidden;">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like"></a>
</div>
</div>
আপনি যদি "লাইক" ক্লিক করেন এবং মতামতটি পপ-আপকে আড়াল করার জন্য আপনার কাছে একটি ধারক ডিভ থাকে তবে লাইক বোতামটি যদি অদৃশ্য হয়ে যায় তবে নিম্নলিখিত সমাধানটি ব্যবহার করুন:
এফবি-এর মতো বোতামটি রাখার জন্য একটি ধারক ডিভ তৈরি করুন এবং এটি নীচের সিএসএস দিন:
.fb_like {
overflow: hidden;
width: 90px;
}
.fb_like iframe {
left: 0 !important;
}
আমি পরিবর্তে আইএফআরএম সংস্করণটি প্রয়োগ করে ফেসবুকের মতো বোতামের মন্তব্য পপ-আপ ইস্যুটিকে রোধ করতে পেরেছি। আমি এটি করতে নিম্নলিখিত পদক্ষেপ নিয়েছি:
আমি যা দেখতে পাচ্ছি তা থেকে, আইএফআরএএম বাস্তবায়ন সহ লাইক বোতামটি কোনও পপ-আপকে ট্রিগার করে না। এটি কেবল একটি লাইক বোতাম হিসাবে কাজ করে। এটি ছিল আমার কাঙ্ক্ষিত পরিণতি।
শুভকামনা।
টুইটার এবং লিংকডিনের পাশাপাশি লাইক বাটনটিকে একটি স্ট্যান্ডার্ড বোতাম হিসাবে কাজ করার কোডটি এখানে। আশা করি এটা সাহায্য করবে.
<!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();
});
যেমনটি আমি ঠিক করেছি, মন্তব্য পপআপটি অক্ষম হবে যখন:
আপনি যদি নতুন এইচটিএমএল 5 বোতামটি ব্যবহার করেন এবং এটি আপনার সামঞ্জস্যপূর্ণ এবং ফেসবুকের পরামর্শ অনুসারে হওয়া উচিত তবে অন্যেরা যা বলেছে তা থেকে দূরে চলে যাওয়া সহজ:
.fb-like, .addthis_button_facebook_like
height: 25px
overflow: hidden
দ্বিতীয় শ্রেণি অ্যাডটিস প্লাগইন ব্যবহার করে তাদের জন্য একটি বোনাস।
আমার ক্ষেত্রে (এক্সএফবিএমএল সংস্করণ সহ) আমি ট্যাগটিতে এটি যুক্ত করেছি:
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>
এটি সঠিকভাবে মন্তব্য পপআপ লুকিয়ে আছে।
মন্তব্য বাক্সের কাজটি আড়াল করা হচ্ছে তবে মন্তব্য ফ্লাইটআউট বাক্সের পিছনে ক্লিকযোগ্য উপাদান থাকলে সমস্যা তৈরি করতে পারে।
আপনাকে এটি লুকিয়ে রাখতে হবে এবং এটি ডোম পোস্ট থেকে পছন্দ মতো মুছে ফেলতে হবে।
মন্তব্য বাক্সটি লুকানোর জন্য এখানে সিএসএস রয়েছে:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
এখানে ডিওএম উপাদানটি সরানোর JQuery উপায়:
FB.Event.subscribe('edge.create', function (href, widget) {
$('.fb_edge_comment_widget.fb_iframe_widget').remove()
});
কলব্যাক থেকে প্রদত্ত উইজেটটি ব্যবহার করে বিশুদ্ধ জাভাস্ক্রিপ্টের উপায়টি এখানে দেওয়া হয়েছে:
FB.Event.subscribe('edge.create', function (href, widget) {
widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);
});
আপনি যদি কেবল লাইক বোতামটি দেখাতে চান তবে আপনি এটির মতো কিছু চেষ্টা করতে পারেন
এইচটিএমএল:
<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>
সিএসএস:
.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;
}
কীভাবে ঠিক কীভাবে আইফ্রেমে তৈরি করা যায় যাতে লাইনের বোতামটি বোতামের সমান আকার থাকে:
.fb_iframe_widget_lift
{
width: 49px !important;
height: 20px !important;
}
এটাই.