Facebook like box html integrieren

Eddy Simpsons

hallo ich will die facebook like box in meine hompage integrienren und habe auf face book mir alles durch gelesen und es befolgt mir wird aber trotz dem nix angezeigt, hat jemand damit erfahrung??

HTML

<!DOCTYPE html>
<html>


<head>
    <title>Titel</title>


    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">


    <link href="style.css" type="text/css" rel="stylesheet">


    <div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : '344933968953362', // App ID from the App Dashboard
      channelUrl : '//www.facebook.com/VodafoneShopImMarktkauf', // Channel File for x-domain communication
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });


    // Additional initialization code such as adding Event Listeners goes here


  };


  // Load the SDK's source Asynchronously
  // Note that the debug version is being actively developed and might
  // contain some type checks that are overly strict.
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>


</head>


<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=344933968953362";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-like-box" data-href="https://www.facebook.com/VodafoneShopImMarktkauf" data-width="400" data-show-faces="false" data-stream="true" data-header="false"></div>


<body>


</body>
</html>

Alles anzeigen

Danke

explanator

Wieviel Ahnung hast du von HTML und CSS?

Ach - Vergiss die Frage, du musst

Code

[COLOR=#000080]</head>
[/COLOR]  [COLOR=#000080]
<div id=[COLOR=#0000FF]"fb-root"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR] [COLOR=#800000]
<script>
[/COLOR](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=344933968953362";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));[COLOR=#800000]
</script>[/COLOR]  [COLOR=#000080]
<div class=[COLOR=#0000FF]"fb-like-box"[/COLOR] data-href="https://www.facebook.com/VodafoneShopImMarktkauf" data-width="400" data-show-faces="false" data-stream="true" data-header="false">[/COLOR][COLOR=#000080]
</div>[/COLOR]  


[COLOR=#000080]<body>[/COLOR]

Alles anzeigen

in das hier ändern

Code

[COLOR=#000080]</head>[/COLOR]


[COLOR=#000080]<body>[/COLOR]  [COLOR=#000080]


<div id=[COLOR=#0000FF]"fb-root"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR] 
[COLOR=#800000]<script>
[/COLOR](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=344933968953362";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));[COLOR=#800000]
</script>[/COLOR]  
[COLOR=#000080]<div class=[COLOR=#0000FF]"fb-like-box"[/COLOR] data-href="https://www.facebook.com/VodafoneShopImMarktkauf" data-width="400" data-show-faces="false" data-stream="true" data-header="false">[/COLOR][COLOR=#000080]
</div>
[/COLOR]

Alles anzeigen

Eddy Simpsons

Danke bleibt aber weis meine seite man siet nichts!! ich habe es auch durch iframe versucht den mir facebook generiert hat sobald ich die html öffne bleibt die weiss und ich finde den fehler nicht.

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>


<body>
<div id="content">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FVodafoneShopImMarktkauf&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=475884635779011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
</div>
</body>
</html>

Alles anzeigen

explanator

Du musst diesen Header nehmen:

HTML

<!DOCTYPE HTML>
<html lang="de">  
    <head>  
        <meta charset="utf-8">  
        [COLOR=#000080]<title>[/COLOR]Unbenanntes Dokument[COLOR=#000080]</title>[/COLOR] [COLOR=#000080]
</head>[/COLOR]

threadi

Zitat von explanator

Du musst diesen Header nehmen:

HTML

<!DOCTYPE HTML>
<html lang="de">  
    <head>  
        <meta charset="utf-8">  
        [COLOR=#000080]<title>[/COLOR]Unbenanntes Dokument[COLOR=#000080]</title>[/COLOR] [COLOR=#000080]
</head>[/COLOR]

Quark. Ob der oder ein anderer Doctype spielt hier keine Rolle. Das Problem ist hier deutlich zu erkennen:

Zitat von Eddy Simpsons

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>


<body>
<div id="content">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FVodafoneShopImMarktkauf&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=475884635779011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
</div>
</body>
</html>

Alles anzeigen

Schau mal was beim src-Attribut steht. Da steht eine URL die mit // anfängt - das geht nicht, kann nie zu einem Ziel führen.

Die Lösung ist also hier noch ein http: davor zu setzen. Schon klappt es auch mit der Einbindung.

Btw. habe ich genau so eine Frage schon oft gesehen, und jedes Mal liegt es an dem Tool, welches Facebook hierfür anbietet:
https://developers.facebook.com/docs/reference/plugins/like-box/
Wenn man dort sich einen Code generieren lässt und auf "iframe" klickt, wird der iframe-Code angezeigt - aber eben ohne das Protokoll davor. Wenn man das 1 zu 1 so übernimmt ohne nachzudenken und nochmal hinzuschauen passiert eben genau das.

Bei der Methode im Eröffnungspost dieses Topics ist es übrigens genau das selbe. Dort steht z.B.

Code

channelUrl : '//www.facebook.com/VodafoneShopImMarktkauf', // Channel File for x-domain communication

Was fehlt? Genau, das Protokoll wiedermal.

Code

channelUrl : 'http://www.facebook.com/VodafoneShopImMarktkauf', // Channel File for x-domain communication

Und auch an 2 weiteren Stellen in dem Code.

explanator

Hallo Threadi,

habe die Frage auch schon öfter gelesen und den erstellten Code den FB liefert auch ausprobiert, aber immer direkt in den Browser kopiert, nie mit Iframe.

Jetzt bin ich der Sache mal nachgegangen, weil es mich neugierig gemacht hat. Warum sollte Facebook einen falschen Code ausliefern?

Also das mit der URI und //http://www...blabla geht in Ordnung laut http://tools.ietf.org/html/rfc3986#section-4.1

Das Problem ist das die Leute es auf ihrem lokalem Rechner ausprobieren. Da steht dann in der Browserzeile was mit file:///c:/...usw.
und da im Iframe keine URL sondern lediglich eine URI angegeben ist wird eben vom Browserpath file: ausgegangen und das klappt dann nicht. Daher die weisse Seite, da ja sonst kein weiterer Text im Dokumnet steht aus dem Iframe.

Lädt man die Seite aber auf seinen Server hoch funktioniert es wunderbar.

Es klappt natürlich auch wenn man, wie du schreibst das HTTP: wieder davor hängt, weil in dem Fall aus der URI eine URL also eine absolute Adresse wird.

Das mit dem Header war von mir natürlich geraten, aber man weiss ja nie.

Also mit den Code von Eddy Simpson lädt das Likeplugin vom Server aus, lokal jedoch nicht.
Getestet mit IE8 und FF.

Eddy Simpsons

Danke habe über all gesucht un nix plausiebeles gefunden. Explanator so versteht es jeder. Danke:-):-):-D:-D

Tags