Facebook Sharebutton + Ajax + jQuery

**d23** · 15.07.2010, 16:00

Hallo liebe Contao-Gemeinde,

ich habe ein interessantes Problem, das wohl am ehesten für die Tüftler hier gedacht ist.

Folgendes Szenario (kann leider keinen Link einstellen, da vorerst nur lokal):
Eine Seite wird via Ajax mit Content befüllt, Navigation erfolgt quasi über Tabs.
Um das zu erreichen, habe ich die jQueryTools ("Tabs" und "History") von flowplayer.org eingebunden. Damit das ganze noch mit Deeplinking funktioniert, werden Anker in die URLs gesetzt.

Dadurch wird zB aus
http://www.beispiel.de/index.php/seite.html

das hier
http://www.beispiel.de/#index.php/seite.html

Hintergrund ist der, dass jeder Tabinhalt per Share-Button auf Facebook gepostet werden können muss und zugleich von außen direkt aufrufbar sein muss. Lässt man bei einem solchen Link nämlich die Raute weg, landet man direkt beim Inhaltselement, nicht auf der Seite in der das Inhaltselement eingebettet ist.
Das gleiche noch für Twitter...

Hier ist mein Lösungsansatz:
Habe mir die share.php vorgenommen und dort folgendes reingeschrieben...

Code:

/**
 * Facebook
 */
if ($in->get('p') == 'facebook')
{
	$query  = '?u=' . rawurlencode($in->get('u'));
	$query .= '&t=' . rawurlencode($in->get('t'));
	$Raute = rawurlencode('#');
	$partOne = substr($query,0,40);
	$partTwo = substr($query,40);
	$query = $partOne.$Raute.$partTwo;
	header('Location: http://www.facebook.com/sharer.php' . $query);
	exit;
}
/**

Ähnliches natürlich auch für Twitter...

Der Witz dabei ist aber, dass es beim Twitter-Button perfekt funktioniert.
Beim Facebook-Button tritt allerdings der Effekt auf, dass der Link bei ALLEN Inhaltsseiten stets nur auf den zu allererst gewählten Inhalt verweist.

Beispiel:
Inhalt = .../#index.php/seite_1.html
FB-Link = .../#index.php/seite_1.html

Inhalt = .../#index.php/seite_2.html
FB-Link = .../#index.php/seite_1.html usw...

Also der zu postende Link ändert sich schlichtweg nicht. Warum???
Beim Twitter-Button ändert er sich schon.

Weiß jemand Rat?

**p7ha** · 15.07.2010, 19:35

Hi!

Kann es sein dass sich durch die Verwendung von Ajax deine GET-Parameter nicht ändern? Überprüf das mal. Seltsam ist, dass es bei Twitter geht... Sicher dass der Code bei beidem übereinstimmt? Poste doch auch mal den funktionierenden Twitter-Code.

**d23** · 16.07.2010, 14:29

Hi,

mit der Aussage weiß ich grad nicht viel anzufangen. Vielleicht hätte ich erwähnen sollen, dass ich hier meine ersten Gehversuche mit PHP und Co. machen muss.
Was genau meinst Du damit, dass sich die GET-Parameter nicht ändern?

Hier mal der Code von Facebook UND Twitter, der sich m.E. nur marginal unterscheidet. Ich denke das Problem liegt irgendwo bei dem 'u'...

Code:

/**
 * Facebook
 */
if ($in->get('p') == 'facebook')
{
	$query  = '?u=' . rawurlencode($in->get('u'));
	$query .= '&t=' . rawurlencode($in->get('t'));
	
        $Raute = rawurlencode('#');
	$trennung = (strpos ( $query, 'index.php' ));
	$PartOne = substr($query, 0, $trennung);
	$PartTwo = substr($query, $trennung);
		
	$query = $PartOne.$Raute.$PartTwo;
	header('Location: http://www.facebook.com/sharer.php' . $query);
	exit;
}


/**
 * Twitter
 */
elseif ($in->get('p') == 'twitter')
{
	$url = $in->get('u');
	
	
	/* 
	// Shorten the URL
	if (Environment::getInstance()->host != 'localhost')
	{
		$req = new Request();
		$req->send('http://tinyurl.com/api-create.php?url=' . $url);

		if (!$req->hasError())
		{
			$url = $req->response;
		}
	}*/
	
	$query  = rawurlencode($in->get('t'));
	$query .= ' ' . rawurlencode($url);
	
	$Raute = rawurlencode('#');
	$trennung = (strpos ( $query, 'index.php' ));
	$PartOne = substr($query, 0, $trennung);
	$PartTwo = substr($query, $trennung);
	$query = $PartOne.$Raute.$PartTwo;
	header('Location: http://twitter.com/home?status=' . $query);
	exit;
}

Edit: Habe vorhin behauptet Twitter ginge nicht. Geht jetzt aber doch. Hatte im php nur was vertauscht...
Also, es herrscht wieder das Ausgangsproblem. Twitter machts richtig (vorausgesetzt man lässt diese fürchterlichen TinyURLs weg), Facebook machts falsch!

**d23** · 19.07.2010, 09:31

Das raubt mir langsam den Schlaf... hat denn keiner ne Idee?

**p7ha** · 19.07.2010, 10:06

Also ich konnte den Fehler rekonstruieren. Ich vermute, dass es an Facebook liegt.
Da FB ja via eines Scriptes auf die Seite zugreift, um sich Meta-Infos zu holen, kann es sein, dass es immer auf die selbe Seite kommt? Für mich sieht es so aus, als speichere FB den Link und merkt/denkt bei der nächsten Seite, dass das der gleiche Link ist, nimmt deshalb den, den es schon hat.

Dazu dann die Frage: Tun deine Links schon richtig? Also führt "...seite2.html" auch auf Seite 2?

Falls ja, vielleicht hat FB Probleme, die # zu interpretieren?

**d23** · 19.07.2010, 10:11

Zitat von p7ha

Tun deine Links schon richtig? Also führt "...seite2.html" auch auf Seite 2?

Falls ja, vielleicht hat FB Probleme, die # zu interpretieren?

Zu Frage 1: Ja, tun sie.
Zu Frage 2: Offensichtlich hat FB Probleme mit der #. Habe eben testhalber den Teil in der PHP entfernt. Ohne die Raute geht's problemlos.
Der Rautenblödsinn ist aber leider notwendig...

**p7ha** · 19.07.2010, 12:27

Ok, dann haben wir das Problem ja mal erkannt. Nun zur Lösung. Du schreibst:

Lässt man bei einem solchen Link nämlich die Raute weg, landet man direkt beim Inhaltselement, nicht auf der Seite in der das Inhaltselement eingebettet ist.

Nun ist die Frage, warum ist das so?
Nutzt du Contao/TYPOlight? Wenn ja, welche Version?
Wie werden denn die Links der Seite/Inhaltselements in die Buttons eingebunden(?)-> Du schreibst ja in die URL unter "u=" die URL deiner Zielseite/Inhaltselements rein. Wie passiert das? Dort müsstest du die URL von der Zielseite, nicht die des Inhaltselements einfügen.
Dann brauchst du den Rautenkram nicht.

**d23** · 19.07.2010, 13:02

System ist Contao 2.9.0.
Die FB und Twitterbuttons sind ja seit C2.9 praktischerweise mit dabei...

Und wie schon im Ausgangspost erklärt:
Da im Hintergrund ein Musicplayer konstant durchlaufen soll, musste ich die restlichen Inhalte via Ajax einbinden. Im Grunde sind das keine Seiten, sondern nur Tabs, die den Inhalt dynamisch nachladen. Da diese Lösung aber von Haus aus keine Deeplinks produzieren kann und somit alle Links nur die index.php in der Browsernavi zeigen würden, werden Anker (#) mit JS eingefügt. Und diese Anker brauchts halt leider für die Facebook- und Twitterbuttons.
Sprich: Wenn jemand bspw. die Seite "Video" bei FB posten will, muss die an FB übergebene URL www.beispielseite.de/#index.php/video.html heißen usw.

Also Workaround arbeite ich gerade an einer generellen Weiterleitung.
Das funzt aber noch nicht so ganz...

**d23** · 19.07.2010, 14:15

Es ist geschafft. Die Weiterleitung funktioniert!

Workaround funktioniert jetzt folgendermaßen:

Code:

/**
 * Facebook
 */
if ($in->get('p') == 'facebook')
{
	$query  = '?u=' . rawurlencode($in->get('u'));
	$query .= '&t=' . rawurlencode($in->get('t'));
		
	$trennung1 = (strpos ( $query, 'index.php' ));
	$trennung2 = $trennung1 + 12;
	$trennung3 = (strpos ( $query, '%3B' ));
	
	$PartOne = substr($query, 0, $trennung1);
	$PartTwo = 'linkCheck.php?link=';
	$PartThree = substr($query, $trennung2, ($trennung3 - $trennung2));
	
	$query = $PartOne.$PartTwo.$PartThree;
	
	header('Location: http://www.facebook.com/sharer.php' . $query );
	exit;
}

Zusätzlich liegt noch eine Weiterleitungs-Datei vor:

Code:

<?php 
$link = $_GET["link"];
$location = 'http://www.example.de/#index.php/'. $link;
header('Status: 301 Moved Permanently');
header('Location:' .$location); 
exit;
?>

An Facebook wird dementsprechend nur ein Weiterleitungslink mit einer Variablen übergeben. Damit ist dort die Raute weg, man wird aber beim Aufruf der URL richtig umgeleitet.

Meine Güte...wat ne Geburt

@p7ha: Danke vielmals, dass Du Dir meinen Krempel angesehen hast!!!