I have problem with facebook plugin in my website. It's showing correctly in Firefox but in IE 9 it's not showing stable. It's moving fast and can't be visible. Please open my above link in IE and have a look.
This is the code in Overall_Header.Html which is placed after the closing of Head tag.
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<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>
<a id="facebook_tab" href="https://www.facebook.com/fedriksa" title="Fedri on Facebook"><span><div class="fb-like-box" data-href="http://www.facebook.com/fedriksa" data-width="292" data-show-faces="false" data-stream="true" data-header="true"></div></span></a>
<div id="wrap">
And, This is my .CSS style refering to facebook_tab
#facebook_tab
{
display: block;
width: 38px;
height: 102px;
background: url("{T_THEME_PATH}/images/facebook_tab.png") no-repeat 0 0;
right:0px;
top:200px;
position:fixed;
}
#facebook_tab span
{
display: none;
}
#facebook_tab:hover {
width:292px;
padding-left:32px;
}
#facebook_tab:hover span
{
display:block;
background-color:#fff;
border:2px solid #999;
border-radius:5px;
}
Please help me in getting rid of this. Many many thanks.
Related
I create cinemagraphs for social media that look like this: https://www.instagram.com/p/BLi7CKKj2fW/
The idea is we post these to my companies social accounts (namely facebook and instagram) all the time, but now we want to include them in our blog as well.
The main issue is that our blog is hosted by simpleview, which doesn't allow us to host the file ourselves (otherwise this would be a simple fix). It only allows us to host images. We tried using .gifs but .gifs are very limited (only 256 colors) and they are not high quality enough to properly show off the cinemagraphs.
I've tried embedding an instagram using this:
<blockquote class="instagram-media" data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:28.125% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by Justus Wise (#justusjohnwise) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-10-14T13:51:36+00:00">Oct 14, 2016 at 6:51am PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
This works just as I want it to except that it doesn't autoplay.
I've tried embedding Facebook like this:
<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.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-video" data-autoplay="true" data-href="https://www.facebook.com/justusj.wise/videos/106163723455703/" data-width="1920" data-show-text="false">
<blockquote cite="https://www.facebook.com/justusj.wise/videos/106163723455703/" class="fb-xfbml-parse-ignore">
<p></p>Posted by Justusj Wise on Thursday, August 31, 2017</blockquote>
</div>
which will autoplay using the data-autoplay="true" parameter. However I can't seem to get it to loop.
Finally I tried youtube like this:
<p><iframe frameborder="0" height="720px" src="https://www.youtube.com/embed/4VsRjbQi4aw?
autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&playlist=4VsRjbQi4aw" width="1080px"></iframe></p>
which autoplays and loops (almost perfect) but when it loops it has to load the video all over again -- which ruins the emersion of the cinemagraph.
All I want is a cinemagraph on my blog that loops, autoplays, and has minimal controls/branding as possible.
Anyone have help/advice?
if the code above isn't working links to w3schools in comment below
I would like to make a dynamic facebook share button, which I can of course make on facebook's page.
However, I would like to make a very large button, just like on this website:
http://fullym.com/these-photos-of-an-el-salvador-prison-for-gang-members-may-make-you-sick/
But I have no idea how?
I'm using Joomla.
Thanks!
Here is the code for a share button, you can also see it on JS Bin.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<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=236759163171393";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.fb-share-button
{
transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
-o-transform: scale(3.5);
-moz-transform: scale(3.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
</style>
<div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button"></div>
</body>
</html>
The result looks like this:
Here is the code in 2 parts:
CSS
#like_btn IFRAME
{
transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
-o-transform: scale(3.5);
-moz-transform: scale(3.5);
transform-origin: bottom left;
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
}
Then HTML part:
<div id="like_btn"><iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:90px; height:22px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXXXXX&send=false&layout=button_count&width=90&show_faces=false&action=like&colorscheme=light&font&height=22&appId=XXXXXXXXXXXXXX"></iframe></div>
Note you'll need to replace the inside of the like_btn div with your Facebook IFRAME. You can also change the 3.5 to another number to increase or decrease size.
I just added the FB share code inside a div with whatever background image I wanted to display (in this case the Facebook logo in 64x64), and set opacity to zero. I used Transform: Scale to scale the widget (default 14x17) to the size of the parent div.
HTML:
<!-- FB SDK -->
<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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Facebook share button 64x64 -->
<div id="fb-share" class="social" style="background-image: url(/assets/images/FB-f-Logo__blue_144.png);">
<div class="fb-share-button" data-href="http://my.website.com" data-layout="icon"></div>
</div>
CSS:
.fb-share-button {
opacity: 0;
transform: scale(4.5);
transform-origin: top left;
}
The site you linked to does not use the Facebook SDK.
What the share button does is opens a popup with a url like this:
https://www.facebook.com/sharer/sharer.php?u=[url-to-share]
So you can make a button look like anything you like, and catch the click on the button to open a popup with the above URL.
Here's a basic example: (The sinippet doesn't actually work because popups are blocked by SO - not sure how to enable that.)
$(function() {
$("#facebook-share-button").on("click", function() {
var url = "https://www.facebook.com/sharer/sharer.php?u=" + window.location.href;
var width = 595;
var height = 465;
var left = window.screenX + window.outerWidth / 2 - width / 2;
var top = window.screenY + window.outerHeight / 2 - height / 2;
window.open(url, 'facebookShareWindow', 'height=' + height + ',width=' + width + ',left=' + left + ',top=' + top);
});
});
.custom-button {
background: black;
color: white;
font-size: 30px;
border: none;
border-radius: 5px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="facebook-share-button" class="custom-button">Share this on Facebook</button>
Any simple way to show loading icon or message until loading Facebook like box on page.
And hide message/icon after like box completely loaded on page.
Snap:
Code:
<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=488390501239538";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function TakePreview()
{
jQuery('#loadingmsg').show();
location.href = location.href;
}
<div id="previewfanbox">
<strong>Fanbox Widget Preview</strong><br>
<p id="loadingmsg" style="display:none;">Loading Like Box, please wait...</p>
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true">
</div>
</div>
<input name="takepreview" id="takepreview" class="button" type="button" value="Refresh Preview" onclick="return TakePreview();"><br>
So, please suggest me a simple way or any other way to achieve this. Thanks mates!
I've set this up with pure CSS!
When using the HTML5 Like Box, Facebook adds a data-attribute once the Like Box is loaded. So to target the loading state, I added a spinner GIF to the container and then removed it using an attribute selector:
.fb-like-box {
background-image: url(../img/loading_icon.gif);
background-position: center;
background-repeat: no-repeat;
}
.fb-like-box[fb-xfbml-state="rendered"] {
background-image: none;
}
Depending on your implementation, you may need/want to force a height on the loading state and some styles on the container div also while the box loads, but that should get you started.
The one minor caveat is that this only works in browsers that support attribute selectors, but the only "major" one is IE7 which most people have dropped support for at this time.
There is one attribute fb-xfbml-state="none" that you should add manually to your fb-like-box class in HTML to stlke your fb-like-box manually.
<div
class="fb-like-box"
fb-xfbml-state="none"
data-href="https://www.facebook.com/FacebookDevelopers"
data-width="292"
data-show-faces="true"
data-header="true"
data-stream="false"
data-show-border="true">
</div>
Now write some CSS for the loader
.fb-like-box[fb-xfbml-state="parsed"], .fb-video[fb-xfbml-state="none"]{
background-image: url("../img/loader-icon.gif");
background-position: center;
background-repeat: no-repeat;
}
.fb-like-box[fb-xfbml-state="rendered"] {
background-image: none;
}
Since you have not provided the exact CSS of your page... I am demonstrating my code by my example using the exact same code that I have given
Pen Link: https://jsfiddle.net/ashuvssut/rLh2cauj/1/ (wait a sec! this pen just has the code that works...but this pen won't render those FB embedding cause these pen websites don't support this feature)
Proof : that it works: visit https://ashuvssut.github.io/Bless-n-Bliss/events.html
I have three products listed on a single page and I'm looking to add a small comment box to the side of each of the products, kind of like : https://www.facebook.com/SanukFootwear?ref=ts&sk=app_113298085356151. The main problem is, I can't seem to figure out how to add more than one comment box to the page.
I tried using HTML5 and XFBML. The code I'm using now is :
<html xmlns:fb="http://ogp.me/ns/fb#">
<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=MYAPPID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and
<fb:comments href="MYURL" num_posts="5" width="500" xid="product_01"></fb:comments>
It seems that adding xid to the <fb:comments> block is supposed to generate a unique list of comments for only that xid. This however is not working. If I do the following:
<fb:comments href="MYURL" num_posts="5" width="500" xid="product_01"></fb:comments>
<fb:comments href="MYURL" num_posts="5" width="500" xid="product_02"></fb:comments>
and try posting on either one, the comment shows up on both. Is there something I'm missing to allow these unique comments?
The code from the sanuk shop facebook pages is this:
<fb:comments xid="featured_product_56062795998_1" width="255" numposts="5" expr:href="##_1" class=" fb_iframe_widget">
<span>
<iframe id="f1f0d95ac" name="f341a4ded" scrolling="no" style="border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; width: 255px; height: 572px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " class="fb_ltr" src="https://www.facebook.com/plugins/comments.php?api_key=113298085356151&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df5542ec34%26origin%3Dhttps%253A%252F%252Fnorthsocial.com%252Ff2d77af7ec%26relation%3Dparent.parent%26transport%3Dpostmessage&locale=en_US&numposts=5&sdk=joey&title=&url=https%3A%2F%2Fnorthsocial.com%2Fapp%2Ftab%2Ffeatured_products%2Fview.php&width=255&xid=featured_product_56062795998_1"></iframe>
</span>
</fb:comments>
I have no idea where they are getting this iFrame content from. I referred to the facebook development docs, but have been unable to find any information. Any help would be appreciated!
Thanks in advance,
Tre
The comments plugin doesn't have a xid paramter that I can see at: https://developers.facebook.com/docs/reference/plugins/comments
You need to specify a unique URL for each of the comment boxes
I have resolved multiple comments boxes issues for one page for my site. This is what worked for me:
When generating your FB code, you have to enter the "URL to comment on". For the first box, just enter the url. For second box I added mysite.com/#comments2. For third box I added mysite.com/#comments3. Etc, Etc. This should give you a separate comment box per URL. Hope this helps.
It still working with below code.
<fb:comments reverse="false" publish_feed="false" showform="true"
simple="false" migrated="1" canpost="true" url='[Your URL]'
width="580px" numposts="10" xid="[Unique ID]">
</fb:comments>
I am trying to simply add the like button to my simple website and I don't get any graphics at all. I went to AddThis and their implementation doesn't work either. Is my system not setup correctly or am I making a rookie mistake. Here is the code and all I get is a red box with the paragraph.
Thanks for any help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Facebook button test</title>
</head>
<body>
<style type="text/css">
.content p {
border: 1px solid red;
position: relative;
}
.fb-root {
border: 3px solid blue;
height: 200px;
width: 500px;
padding: 1em;
float: right;
}
.fb-like {
border: 10px solid green;
padding: 1em;
}
</style>
<div class="content">
<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>
<fb:like href="facebook.com/burgessfww" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
<p> Some text to take up some space and see what's happening!</p>
</div>
</body>
</html>
I think the problem is simple... but since I didn't test it You should!
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:fb="http://ogp.me/ns/fb#">
This seems to be your mistake: XMLNS:FB twice
xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:fb="http://ogp.me/ns/fb#"
change it to
xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns/fb#"
best regards