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'd like to disable the Comment box that pops up when a user clicks the Facebook (fbml) Like button I've placed on my site. Is this possible to do? I can't find any details in the documentation.
Simplest fix to hide the comment box after Facebook Like (XFBML version not the iframe one) is as given:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Put the CSS style in any of your CSS file and see the magic, it works :)
Putting the iframe in a appropriately sized div with overflow set to hidden resolved this issue - although this is only actually hiding the problem as such.
I use this in my CSS:
.fb-like{
height: 20px;
overflow: hidden;
}
and render the Facebook button with the normal HTML5 code, something like this:
<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>
gr-
What I did is crate a div for the "like" button like this:
<div class="fb_like">
<fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>
And this is the CSS :
.fb_like {
overflow: hidden;
width: 90px;
}
I like Mohammed Arif's solution and I choose it as the best answer. But in case FB changed classes, then the below will always work..
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();
});
where "like_button_holder" is "YOUR" div id holding the facebook like button code
The cleaner solution that works (as of May 2014)-
First of all make sure the the <div class="fb-like" has data-layout property as button-
<div class="fb-like" data-layout="button"........></div>
Just add this CSS-
.fb-like{
overflow: hidden !important;
}
That's it!
Demo
Not to be a Debby Downer here, but doesn't hiding the comments box violate Facebook Policy?
IV. Application Integration Points
d. You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin.
https://developers.facebook.com/policy/
I couldn't get the display: none option to work with the HTML 5 version of the button. Instead I targeted the div that the like button button is created in and set the overflow to hidden.
Dropping the following in my main css file did the trick:
#fb_button{
overflow:hidden;
}
Agree with BrynJ, best solution currently is to put the like button in a 20px high div container, and set the overflow to hidden (I read somewhere that FB recently moved the comment flyout into the iFrame, so the solution that modifies the styling of .fb_edge_widget_with_comment is probably not useful anymore for iFrame users).
Using AddThis? Do this:
<div class="container" style="height: 20px; overflow: hidden;">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like"></a>
</div>
</div>
If the like button disappears when you click "like" and you have a container div to hide the comment pop-up, then use the following solution:
create a container div to place the fb-like button in and give it the following css:
.fb_like {
overflow: hidden;
width: 90px;
}
.fb_like iframe {
left: 0 !important;
}
I managed to circumvent the Facebook like button comment pop-up issue by implementing the IFRAME version instead. I took the following steps to do so:
Visit https://developers.facebook.com/docs/plugins/like-button/
Change the 'URL to Like' to your Facebook page URL
Select any other options (Layout, Action Type, etc) as desired
Press the 'Get Code' button
Select the IFRAME version
Make sure you select your Facebook application where it says 'This script uses the app ID of your app'
Implement the provided code in your application
From what I can see, the like button with IFRAME implementation does not trigger any pop-up. It simply functions as a like button. This was my desired outcome.
Good luck.
Here is the code to have the Like button working as just a standard button along with Twitter and Linkedin. Hope it helps.
<!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">
Tweet
</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>
Lets try this one:
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();
});
As i have done ok, the comment popup will be disabled when:
Show faces: -> uncheck it
Get Code: -> choose IFRAME option
If you use the newer HTML5 button, and you should as it's forward compatible and suggested by Facebook, it's easy, going off from what others have said:
.fb-like, .addthis_button_facebook_like
height: 25px
overflow: hidden
The second class is a bonus for those using the AddThis plugin.
The overflow height options mentioned above shouldn't be used when show-faces=true. Otherwise, it will hide the faces.
In my case (with the XFBML version) I've added to the tag this:
width="90" height="20" style="overflow: hidden;"
So the end result is:
<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>
It's hiding correctly the comment popup.
Hiding the comment box work but can create problem if you have clickable element behind the comment flyout box.
You have to hide it and remove it from the DOM post like.
Here is the CSS to hide the comment box:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Here is the JQuery way of removing the DOM element:
FB.Event.subscribe('edge.create', function (href, widget) {
$('.fb_edge_comment_widget.fb_iframe_widget').remove()
});
Here is the pure javascript way using provided widget from the callback:
FB.Event.subscribe('edge.create', function (href, widget) {
widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);
});
If you want to show only the like button, you may try something like this
HTML:
<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>
CSS:
.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;
}
Setting overflow to hidden might help. Do this in your main css file..
#fb_button{
overflow:hidden;
}
How about just make the iframe that contains the like button the same size as the button:
.fb_iframe_widget_lift
{
width: 49px !important;
height: 20px !important;
}
That's it.