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
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
When i try to load markers from my map i get this error message:
{"message":"Markers do not exist"}
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BoxMap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'this_is_my_token';
var map = L.mapbox.map('map')
.setView([40.447, -5.625], 2);
L.mapbox.styleLayer('mapbox://styles/this_is_my_style').addTo(map);
L.mapbox.featureLayer().loadID('this_is_my_map_id').addTo(map);
</script>
</body>
</html>
PS: when i try to put a map_id from the given examples on mapbox website, it works! example: examples.map-h61e8o8e
Thanks
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>
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.
I am implementing a Facebook application that shown as a tab in a fan page.
The application has a product details page that has like, send and comments plugins.
The problem is when clicking on the send and like buttons, the flyout dialog (the window that pops after clicking the button) is clipped by the left edge of the iframe (The application is in right to left language).
From graphical design perspective, the location of the buttons can't be changed and scroll bars are not allowed. The application must be 520px wide, no more and no less.
Is there any option to control the position of the flyout to prevent its clipping? Is there any other way to prevent the clipping?
I searched similar questions here with no success.
Since these buttons include HTML structure in your page, they are stylable via CSS. So you can move the popup dialogs with CSS.
Some Code
If you take a closer look at the popups presented by facebook, you will see, that it has some styles attached to it:
The only thing you now have to do is moving this popup via CSS to the correct position.
For example: if you want to hide the comment popup of the like button completely, you can just use this CSS:
.fb_edge_comment_widget.fb_iframe_widget {
display: none;
}
If you now want to move it, you cannot use .fb_edge_comment_widget.fb_iframe_widget since the element properties (set by JavaScript) will override your CSS. You have to use the span one element lower:
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}
This code will move the popup by 300px to the left:
This is not the most beautiful solution (note the small arrow at the top of the box now points to nothing), but it works.
Complete test code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}
#wrap {
width: 650px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<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/de_DE/all.js#xfbml=1&appId=336384849737745";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.google.de" data-send="true" data-width="500" data-show-faces="false"></div>
</div>
</body>
</html>
It's not an exact answer to your question. It seems you cannot control the flyout at all. I was happy to get rid of the flyout completely by putting my fb button code in a div that's only as high as the button and set the overflow: hidden. Then the popup's not visible at all.
<div class="fb-wrap">
<div class="fb-like" data-href="http://www.facebook.com/YOURURL="false" data-width="200" data-show-faces="false" data-colorscheme="dark"></div></div>
<style>
.fb-wrap {
height: 36px;
overflow: hidden;
}
</style>