I try embed facebook code to my blog:
<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/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-send" data-href="http://codingvn.com/2016/02/01/viet-chuong-trinh-java-dau-tien/""></div>
<div class="fb-like" data-href="http://codingvn.com/2016/02/01/viet-chuong-trinh-java-dau-tien/" data-width="500" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
I also try: style="z-index:99999;"
<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/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-send" data-href="http://codingvn.com/2016/02/01/viet-chuong-trinh-java-dau-tien/" style="z-index:99999;"></div>
<div class="fb-like" data-href="http://codingvn.com/2016/02/01/viet-chuong-trinh-java-dau-tien/" data-width="500" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true" style="z-index:99999;"></div>
but result very poor:
when press Facebook like button
when press Facebook send button
Help me, I tried more than 1 week but not success.
add this css:
.fb-like span {
overflow:visible !important;
width:450px !important;
}
.fb-send span {
overflow:visible !important;
width:450px !important;
}
Related
I'm trying to have 3 x 340px wide boxes (used for holding social media feeds) next to each other. I've got the first 2 lined up perfectly but the 3rd is not lining up.
I'm using a custom html field in wordpress. Code is below:
<div style="width:100%;height:500px;float:center;">
<div style="width:340px;height:500px;float:left;background-color:red;">
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/consciousyouthuk" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/consciousyouthuk" class="fb-xfbml-parse-ignore">Conscious Youth C.I.C</blockquote></div></div>
<div style="margin:0 auto;width:340px;height:500px;background-color:red;">
<a class="twitter-timeline" data-width="340" data-height="500" href="https://twitter.com/Cyouthcic?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<div style="width:340px;height:500px;float:right;background-color:red;">
</div>
</div>
Image here shows what it's doing:
Hi you can do this easily by using bootstrap grid. check the jsfiddle output :: https://jsfiddle.net/ruokr7rp/1/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm" style="background-color:red;">
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-href="https://www.facebook.com/consciousyouthuk" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/consciousyouthuk" class="fb-xfbml-parse-ignore">Conscious Youth C.I.C</blockquote>
</div>
</div>
<div class="col-sm" style="background-color:red;">
<a class="twitter-timeline" data-width="340" data-height="500" href="https://twitter.com/Cyouthcic?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-sm" style="background-color:red;">
</div>
</div>
</div>
check this :: https://jsfiddle.net/ruokr7rp/
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 align="center">Segui #ambradeibimbi
<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> Tweet
<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>
<div class="fb-like" data-href="https://www.facebook.com/pages/Ambra-dei-Bimbi/302029161075?id=302029161075&sk=app_208195102528120" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
Use CSS, example (first div):
<div style="margin:auto;width:100%">
margin:auto aligns the div to the center of its parent container.
You need width:100% or else margin:auto will not work.
Create a wrapper <div> and set the margin to auto for left and right.
Html
<div class="center">
{... Your code here... }
</div>
CSS
.center {
margin-left: auto;
margin-right: auto;
}
You may also need to set the desired width of this element.
Give one class or id to div then do css:
<div class="social">
content
</div>
CSS
.social {
width: 50%; // what ever width you want you can put
margin-left:auto;
margin-right:auto;
}
I am attempting to adjust the width of the Google+ comment widget for the mobile device. Here is my HTML:
<div id="tabs">
<ul>
<li><img src="/images/icon-facebook.png" alt="Facebook Icon" /><p class="tabTitle">Comment on <strong class="fbBlue">Facebook</strong></p></li>
<li><img src="/images/icon-plus.png" alt="Google+ Icon" /><p class="tabTitle">Comment on <strong class="googleRed">Google+</strong></p></li>
</ul>
<div id="tabs-1">
<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&appId=654528351241254";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.harvekeronline.com/3dlm-lesson-your-ideal-life/" data-colorscheme="light" data-numposts="10" data-width="100%" data-order-by="reverse_time" data-mobile="200px"></div>
</div>
<div id="tabs-2">
<script src="https://apis.google.com/js/plusone.js">
</script>
**<div class="g-comments"
data-href="http://www.harvekeronline.com/3dlm-lesson-your-ideal-life/"
data-width="medium"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>**
</div>
</div>
It is possible that the "tabs" div is messing this up, but other then that, I have no idea.
Does anyone have any suggestions?