I have a facebook Like button in my website.
I have kept the Like Button only once.
When I try it in my local system. I get the Like button correctly But the same index.html when put Live shows me 2 like button .. How do I handle this .
Strange, from looking at the source the problem is:
<div id="callUs" style="FLOAT: right"><a>Call us: +91-95661 60513<br ><span>email: bimmtechnologies#gmail.com</span></a></div>
<div align="right" class="fb-like" data-href="http://bimmtechnologies.com/" data-send="true" data-width="450" data-show-faces="true"></div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.bimmtechnologies.com/" scrolling="no" frameborder="0" style="border:none; width:200px; height:40px">
</iframe>
there seems to be only one iFrame, yet inspecting DOM gives you:
<div id="callUs" style="float: right;"><a>Call us: +91-95661 60513<br><span>email: bimmtechnologies#gmail.com</span></a></div>
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://bimmtechnologies.com/" data-send="true" data-width="450" data-show-faces="true" align="right">
<span style="height: 29px; width: 450px;">
<iframe src="http://www.facebook.com/plugins/like.php?channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Df1d310dc178f298%26origin%3Dhttp%253A%252F%252Fwww.bimmtechnologies.com%252Ffd67aabbddb5%26domain%3Dwww.bimmtechnologies.com%26relation%3Dparent.parent&extended_social_context=false&href=http%3A%2F%2Fbimmtechnologies.com%2F&layout=standard&locale=en_US&node_type=link&sdk=joey&send=true&show_faces=true&width=450" class="fb_ltr " title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 29px; width: 450px;" name="f2e9ee7de90f1f6" id="f7f40995b577b2" scrolling="no"></iframe>
</span>
</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.bimmtechnologies.com/" style="border: medium none; width: 200px; height: 40px;" frameborder="0" scrolling="no">
</iframe>
Some strange java-script is adding content into the div with class "fb-like":
<div align="right" class="fb-like" data-href="http://bimmtechnologies.com/" data-send="true" data-width="450" data-show-faces="true">
</div>
If you disable javascript, notice how the double disappears.
Fix
remove the aforementioned div as well as:
<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>
which appears right after
<body>
Double-check your code because you really have two iframes generating fb buttons. You have one div with class .fb-like fb_edge_widget_with_comment fb_iframe_widget (the one that is styled, which makes me think is the right one), and right after you close this div you have another iframe tag that you can try to delete. As a last option, try this in your style.css file: #header > iframe { display: none; } - Hope it helps!
Related
I am trying to build in a facebook feed that disppears when the page get's too thin.
<div id="facebook">
<div id="fb-root" class="col-md-4 col-xs-12" style="margin:0;padding:0;"></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/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/novakovtech/" data-tabs="timeline" data-width="500" data-height="700" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/novakovtech/" class="fb-xfbml-parse-ignore">
Novakov Tech
</blockquote>
</div>
</div>
That was my html
Here is my CSS:
#facebook{
width:40% !important;
float:left!important;
}
#media(max-width:1300px){
#facebook #fb-page #fb_iframe_widget #fb-xfbml-parse-ignore #fb-root{
visibility:hidden !important;
display:none !important;
}
}
I tried to make every class possible have a display none, but nothing worked so far. I am getting frustrated so thank you for any help you can provide.
why not utilize bootstrap classes for this
<div id="facebook" class="hidden-xs hidden-sm">
---
---
</div>
ex: hidden-xs will hide div in xtra small screen (<768px) like mobile
you can learn more here http://getbootstrap.com/css/#responsive-utilities-classes
I am using Facebook social plugin for developers on my website. It's not responsive on mobiles and tablets I followed few StackOverflow answers but still not able to solve my issue. I have a content row and and a span6 class in which my widget is placed.
my HTML is like this.
<div class="row content_row">
<div class="span6">
<div class="Facebook">
<h2><a id="about_us">Facebook</a></h2>
<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</blockquote></div></div>
</div>
</div>
i did apply some CSS From other answers but it also failed.
Css:
.fb-page, .fb-page iframe[style], .fb-page span {
min-width: 100% !important;
width: 100% !important;
}
Restrictions
Using CSS3 transform
Set data-adapt-container-width="false"
(or something went wrong under 500px)
This fb-plugin was set to 500x500
<script src="jquery.rwd-fb-plugin.js"></script>
<!--FB-page-plugin part1-->
<div id="fb-root"></div> <script>(function(d, s, id) { ... } </script>
<!--FB-page-plugin part2-->
<div class="fb-page"> ... </div>
$(function(){
$('.fb-page').rwd();
});
Demo: RWD-fb-plugin
You need call fb-page div with new data-width and call function "FB.XFBML.parse();" every time, when is site resized.
So JavaScript can help for this problem:
<div class="row content_row">
<div class="span6">
<div class="Facebook">
<h2><a id="about_us">Facebook</a></h2>
<div class="facebook-wrap">
<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</blockquote></div></div>
</div>
</div>
</div>
</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/sdk.js#xfbml=1&version=v2.2";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(function(){
$(window).resize(function(){
$('.facebook-wrap').html('<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-width="'+$('.facebook-wrap).width()+'" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</blockquote></div></div>');
FB.XFBML.parse();
});
});
</script>
<div class="LHSChunk" style="width:690px;float:left;">
<div class="DetailComments" runat="server" id="CommentVisible">
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 700px; height: 400px; visibility: visible;"></iframe>
</div>
</div>
Here I wanted to set my iframe's height as dynamic one based on the page displayed in iframe. For your info I'm using same domain page in iframe.
This helped me,
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight;
}
</script>
in aspx,
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 690px; visibility: visible;"></iframe>
in aspx.cs,
iframeComments.Attributes.Add("onload", "resizeIframe(this)");
Thanks.
On this page I want to vertically center my rounded avatar to other elements in the row (fb / twitter buttons). Here's a snippet of code of the row:
<div style="color:#333;background-color:#fff;background-image: url();padding-bottom: 15px;border-bottom: 1px dotted #ddd;border-top: 1px dotted #ddd;margin-bottom: 20px;">
<div class="entry-meta">
<span class="vcard author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<img height="32" width="32" src="http://twitter.com/api/users/profile_image?screen_name=crazzzytravel" alt="Crazzzy Travel">
<span itemprop="name">Illia and Nastia</span>
<iframe id="twitter-widget-3" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1404859412.html#_=1406708138374&id=twitter-widget-3&lang=en&screen_name=crazzzytravel&show_count=false&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 141px; height: 20px;"></iframe>
<script>
! 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>
</span>
<iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fcrazzzytravel&width=&height=80&colorscheme=light&layout=standard&show_faces=true&appId=629938040435478" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height: 20px;" allowtransparency="true"></iframe>
</div>
</div>
Thank you in advance and please let me know if I can make this question easier to understand, if needed.
Try:
span.vcard.author > a{
vertical-align:middle
}
In order to then centre the whole block- you may then way to add padding-top:15px on the parent div to even it up
Full code:
<div style="color:#333;background-color:#fff;background-image: url();padding-top:15px;padding-bottom: 15px;border-bottom: 1px dotted #ddd;border-top: 1px dotted #ddd;margin-bottom: 20px;">
<div class="entry-meta"> <span class="vcard author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"> <a style="vertical-align:middle;" href="http://crazzzytravel.com/author/illia-and-nastia/" class="circle"><img height="32" width="32" src="http://twitter.com/api/users/profile_image?screen_name=crazzzytravel" alt="Crazzzy Travel"></a> <a style="vertical-align:middle;" href="http://crazzzytravel.com/author/illia-and-nastia/" class="url fn n" rel="author" itemprop="url"><span itemprop="name">Illia and Nastia</span>
</a>
<iframe id="twitter-widget-3" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1404859412.html#_=1406708138374&id=twitter-widget-3&lang=en&screen_name=crazzzytravel&show_count=false&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 141px; height: 20px;"></iframe>
<script>
! 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>
</span>
<iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fcrazzzytravel&width=&height=80&colorscheme=light&layout=standard&show_faces=true&appId=629938040435478" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height: 20px;" allowtransparency="true"></iframe>
</div>
</div>
With the above in mind- you should strongly consider removing your inline styles and putting them in your stylesheet.
Add vertical-align:middle to the following class:
.circle img {
border-radius: 50%;
vertical-align: middle;
}
I cannot get the FB Like button and the Tweet button to display next to each other!!
HTML:
<div class="grid_3 social">
<ul>
<li>
<fb:like href="http://{{ request.get_host }}{{ post.get_absolute_url }}" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</li>
<li>
Tweet
</li>
</ul>
</div>
CSS:
.social {
float: right;
}
.social ul {
list-style: none outside none;
display: inline;
}
.social li {
display: inline;
}
I tried every combination I can think of to no avail. Help please!! CSS will be the death of me...
While we're on the subject of these buttons, we all know they double and triple your page's load time because they make a lot of JS calls, especially when you're on something like a blog index page. Anyone have any ideas on how to remedy this situation? I'm already using Disqus, and now adding FB and Twitter my index page can take up to 5 seconds to load. So slow. Would showing no counts on the buttons help?
Thanks!
EDIT: Actual HTML taken from Firebug:
<div class="grid_3 social">
<ul>
<li>
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" font="" width="450" show_faces="false" layout="button_count" href="http://localhost:8000/24/">
<span>
<iframe id="f3625cd56daea42" class="fb_ltr" scrolling="no" name="fdb43a564bf6bc" style="border: medium none; overflow: hidden; height: 25px; width: 450px;" title="Like this content on Facebook." src="http://www.facebook.com/plugins/like.php?api_key=109222892497007&channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D0%23cb%3Df30031a637a623%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff1d530a50043dd4%26relation%3Dparent.parent%26transport%3Dpostmessage&href=http%3A%2F%2Flocalhost%3A8000%2F24%2F&layout=button_count&locale=en_US&node_type=link&sdk=joey&show_faces=false&width=450">
<html id="facebook" class=" " lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="plugin transparent_widget ff3 mac Locale_en_US">
<input id="post_form_id" type="hidden" autocomplete="off" value="fa23e0256eb11be4c423202178ac80f5" name="post_form_id">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<div id="LikePluginPagelet">
<div id="connect_widget_4daeb2d755f689e27484431" class="connect_widget button_count" style="">
<table class="connect_widget_interactive_area">
<tbody>
<tr>
<td class="connect_widget_vertical_center connect_widget_button_cell">
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">Like</span>
</a>
</div>
</div>
</td>
<td class="connect_widget_vertical_center connect_widget_confirm_cell">
<td class="connect_widget_button_count_including hidden_elem">
<td class="connect_widget_button_count_excluding">
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
</body>
</html>
</iframe>
</span>
</fb:like>
</li>
<li>
<iframe class="twitter-share-button twitter-count-horizontal" scrolling="no" frameborder="0" tabindex="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/tweet_button.html?_=1303294651733&count=horizontal&lang=en&text=mytext&url=http%3A%2F%2Flocalhost%3A8000%2F24%2F" style="width: 110px; height: 20px;" title="Twitter For Websites: Tweet Button">
<html lang="en">
<head>
<body class="hcount show-count">
</html>
</iframe>
</li>
</ul>
</div>
How about:
.social li {
float: left;
}
It would help to see your actual HTML. <fb:like> is not an HTML tag, it’s Facebook’s little markup language they made up (FBML), and it gets replaced with actual HTML when Facebook’s JavaScript runs.
(I believe they’re looking to deprecate FBML too — you might want to have a look at the <iframe>-based like button.)
To answer your second question, you would want to load the javascript asynchronously - someone has modified the twitter script to do so, and I would imagine the facebook script has been modified to do the same.
I can't find links too readily on google, but for 5 seconds a page I'm sure you have the motivation!
The simplest solution I have found is to wrap your buttons in a LI inside a UL.
Take your facebook button code:
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>
Change the DIV tag to LI, and set it inside the UL with the rest of your buttons:
<li class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></li>
And set your CSS widths for the class fb-like down to something closer to its actual size.
You can assign following CSS Class to your List Items
.NextTo
{
float : left;
}
or
.NextTo
{
display: inline-block;
width: auto;
}
I also spent a lot of time to bring them together and show next to each other and finally found the easiest solution..
You simply need to past html codes between:
<div align="center">... past your code here...`</div>`