I just added a like button to my blogger, first it didn't work, but now it does,but it shows on all the pages I created on blogger Including the Contact Page http://scheissemag.blogspot.com/p/contact.html, which bothers me and I want to hide it or remove the div.
For the button code I use this one : (which I installed after <div class='post-footer-line post-footer-line2'/> )
<div>
<div id='fb-root'/>
<script>
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='standard' send='false' show_faces='false'/> </div>
I tried to remove with the code I found in this website after searching :
<div id="fr-root"> (I tired LikeDiv too)
my div
</div>
<script>
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
But it's always there !
Instead of removing it, can you just set its visible property to FALSE?
Related
I want my social media buttons (with bubble counts) to sit flush next to each other, but instead there is a random amount of white space between them. Is there a way to remove it?
Here is the current code:
{literal}
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
</script>
<div class="fb-like" data-href="http://www.url.com" data-send="false" data-layout="button_count"
data-width="40" data-show-faces="false" style="vertical-align:top"></div>
<a href="https://twitter.com/User" class="twitter-follow-button" data-show-count="true"
data-show-screen-name="false" data-dnt="true">Follow #User</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
{/literal}
Wrap each one of your plugins in a div with it's style set to style="overflow:hidden;width:50px;float:left;". Use 50px or whatever width you want. Then you will need one final div to cause a "carriage return/line feed" <div style="clear:both" /> just after your last plugin's div tag.
I am developing an app on facebook.
Since yesterday the resizing worked fine with the following snippets:
CSS:
body, html { overflow:hidden; width:810px;margin:0; padding:0; border:0; }
Right before the closing body tag:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow(true,100);
</script>
On Facebook I chose fixed for height and width, but that should not matter due to the autoGrow.
Since today it is just cut off, I tried the fluid settings but it did not change anything. I can remove the css rules for body and html, but then scrollbars are added.
So in short:
The resizing does not work anymore at all.
Important to know (maybe) the app resizes dynamically (via JS) without a page reload.
The code did not change at all, so I am worried Facebook might have changed something?
Besides I also tried this js snippet without any effect (but it does the same anyway):
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
window.setTimeout(function () {
FB.Canvas.setAutoGrow()
}, 250)
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e)
}());
</script>
UPDATE:
The question was answered correctly, but one more thing to notice:
Apply overflow:hidden just to the body, it worked after I removed html from the rule - worked with the old canvas, at least I used it before.
Also putting the code in the header did not change anything as well and is not the same as putting it at the beginning in the body area.
Try this
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID', //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
I have created a facebook apps. It works fine for me. But my problem is that always show vertical and horizontal scrollbar, when I use fluid for both width and height of my page from facebook settings. My page looks like this http://karen.webmascot.com/fb/fbone.jpg. What can I do now?
Set scroll=no and overflow:hidden to your body and use FB.Canvas.setAutoGrow() to remove the scrollbar.
<body scroll="no" style="overflow:hidden">
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
window.setTimeout(function () {
FB.Canvas.setAutoGrow()
}, 250)
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e)
}());
</script>
Try to use overflow:hidden in your body CSS style.
If I only run one of them, then it can show up properly.
If I run both of them at same time, the code who come first will show, the one who come up at bottom will not show.
I believe there's some conflict.
Anyone facing this issue?
<html doctype="XHTML 1.0 Transitional" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div class="fbLikeButton">
<fb:like show_faces="false" width="300"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXX', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<br>
</div>
<!-- facebook code -->
<div align="center">
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("de15667c632963d186082c258e3cc970");</script>
<fb:fan profile_id="XXXXXXXXXX" stream="0" connections="6" width="155" height="350"></fb:fan>
</div>
</body>
</html>
ok, it works now.
I believe it is javascript code redundancy.
Just need to remove one of the javascript reference.
I removed <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
I am using the fb:serverfbml tag to render a multi-friend-selector inside an IFrame.
I am using the new javascript API. I have been trying ALL DAY to get it working.
When I click on the underlines 'selected' link (to filter by the selected friends) the whole page refreshes and the selected friends disappear.
Does the multi-friend-selector just not work with the javascript API?
<fb:serverfbml>
<script type="text/fbml">
<fb:request-form action="http://apps.facebook.com/rollingrazor/" target="_top" method="POST" invite="true" type="Blah blah blah"
content="Blah blah! <fb:req-choice url="http://apps.facebook.com/rollingrazor/" label="Let me check my friends" />">
<fb:multi-friend-selector showborder="false" actiontext="Invite your friends" rows="5" cols="5" bypass="cancel" target="_top" />
</fb:request-form>
</script>
</fb:serverfbml>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'xxxxxxx', status: true, cookie: true,
xfbml: true
});
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Can someone give me a working example using new javascript API with a multi-friend-selector?
I couldn't get it working with the new JS API so I am using the old JS API for the multi friend selector and the new one for everything else. It's annoying but according to their developer roadmap some new friend request features (hopefully an API call) will be released in June. I plan on creating my own invite widget at that point.