button - Wie man eine sehr große facebook share-button?

Hier ist der code für einen share-button, Sie können auch sehen, es auf 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>

Das Ergebnis sieht wie folgt aus:

Wie man eine sehr große facebook share-button?

funktioniert nicht für Mobile Endgeräte, iOS-mindestens

InformationsquelleAutor Metablocks Corp

Hier ist der code in 2 teilen:

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;
}

Dann HTML Teil:

<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&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=22&amp;appId=XXXXXXXXXXXXXX"></iframe></div>

Hinweis: Sie müssen zu ersetzen, die innerhalb der like_btn div mit deinem Facebook IFRAME. Sie können auch ändern, die 3.5 an eine andere Nummer zu erhöhen oder zu verringern Größe.

tnx, aber ich redete über einen "share" - Taste, nicht ein "wie" 🙁
Sollte das gleiche Prinzip
Siehe unten, hat eine zweite Antwort und das Beispiel.

InformationsquelleAutor Metablocks Corp

Habe ich nur noch den FB-teilen-code in ein div mit dem, was hintergrund Bild wollte ich zeigen (in diesem Fall das Facebook-logo in 64x64), und setzen Sie die Deckkraft auf null. Ich verwendet Transformieren: Skalieren-skalieren Sie das widget (Standard-14x17), um die Größe des 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;
}

InformationsquelleAutor Eric Paquette

Die Website, die Sie verlinkt hat nicht Nutzung der Facebook SDK.

Was die share-Taste tut, öffnet sich ein popup-Fenster mit einer url wie dieser:

https://www.facebook.com/sharer/sharer.php?u=[url-to-share]

So können Sie eine Schaltfläche Aussehen, was Sie wollen, und fangen Sie die klicken Sie auf die Schaltfläche, öffnet sich ein popup-Fenster mit der oben genannten URL.

Hier ist ein einfaches Beispiel: (Die sinippet nicht wirklich funktionieren, weil die popups blockiert werden, indem Sie SO - nicht sicher, wie Sie Sie zu ermöglichen.)

JS:

$(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);
  });

});

CSS:

.custom-button {
  background: black;
  color: white;
  font-size: 30px;
  border: none;
  border-radius: 5px;
  padding: 10px;
}

HTML:

<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>

InformationsquelleAutor Lee

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.