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>
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
so i was using this blogger share script for a long time and now it just stopped working. Maybe facebook changed something i don't know maybe you could help me guys because this whole week i'm trying to find who can fix this script.. Maybe you can use it for your own sites..
put this code in the blogger template after tag, enter app id and fill other fields but not required.
So the code:
<!-- FACEBOOK VIRAL SCRIPT BEGIN -->
<style>
#fvsbg {
position:fixed;
top:0;
left:0;
z-index: 99;
background-color: rgba(0,0,0,0);
width: 100%;
height: 100%;
}
#fvsmain {
position:fixed;
top:200px;
left:50%;
margin-left:-225px;
z-index:100;
width:450px;
color:#333;
text-align:center;
font-family:arial,sans-serif;
font-size:13px;
background:transparent;
line-height:1;
height:200px;
display:none;
}
#sharebtn {
width: 200px;
margin: 0 auto;
display: block;
position: relative;
}
#h1 {
color: #FFFFFF;
font-size: 2em;
margin: 0.67em 0;
text-shadow: 0.1em 0.1em 0.2em black
}
#media screen and (max-device-width: 480px) {
#fvsmain {
position:fixed;
top:0;
}
}
</style>
<div id="fb-root"></div>
<script type="text/javascript">
// SETTINGS (put information inside "")
// See this screenshot to understand separate parts: http://img62.imageshack.us/img62/7468/hnk2.png
var AppID = '000000'; // your Facebook App ID
var link = 'http://example.blogspot.com'; // link to your blog (must be the same as app's domain)
var title = 'bbbb'; // title of the post
var description = 'bbbb'; //description of the post
var picture = ''; //image link for post
// --------
// FACEBOOK API
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId: AppID
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function feed(){
FB.ui(
{
method: 'feed',
name: title,
link: link,
picture: picture,
description: description
},
function(response) {
if (response.post_id) {
SetCookie("FVSC","TRUE",1);
document.getElementById("fvsbg").style.display="none";
document.getElementById("fvsmain").style.display="none";
} else {
alert('You must share this to unlock the page!');
}
}
);
}
// FB API END
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)
+ ";expires="+expire.toGMTString();
}
function ReadCookie(cookieName) {
var theCookie=" "+document.cookie;
var ind=theCookie.indexOf(" "+cookieName+"=");
if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(";",ind+1);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
}
window.onload=function() {
if(ReadCookie("FVSC") == "TRUE")
{
document.getElementById("fvsbg").style.display="none";
document.getElementById("fvsmain").style.display="none";
}
if(ReadCookie("FVSC") != "TRUE")
{
document.getElementById("fvsbg").style.backgroundColor="rgba(0,0,0,0.6)";
document.getElementById("fvsmain").style.display="block";
}
};
if(document.URL.indexOf("blogspot") >= 0)
{
if(document.URL.split('.')[1] + document.URL.split('.')[2] + document.URL.split('.')[3] != 'blogspotcom/undefined')
{
window.location = link + "/ncr";
}
}
</script>
<div id="fvsbg"></div>
<div id="fvsmain">
<h1 id="h1" class="center">Share to Unlock this page</h1>
<img id="sharebtn" src="http://i.imgur.com/5mSP6c1.png" />
</div>
<!-- FACEBOOK VIRAL SCRIPT END -->
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 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>