Social Bookmarklinks erweitern - Versionsgeschichte

Mccrossen: /* Frontend-Modul anlegen */ Bild hinzugefügt

2011-05-12T04:53:12Z

‎Frontend-Modul anlegen: Bild hinzugefügt

Mccrossen: /* Templates importieren */ Bild hinzugefügt

2011-05-12T04:50:46Z

‎Templates importieren: Bild hinzugefügt

Mccrossen: /* Erweiterung social_bookmarks installieren */ Bild hinzugefügt

2011-05-12T04:46:34Z

‎Erweiterung social_bookmarks installieren: Bild hinzugefügt

Mccrossen: /* Template mod_social_bookmarks.tpl editieren */ Quelltext verbessert

2011-05-12T04:42:47Z

‎Template mod_social_bookmarks.tpl editieren: Quelltext verbessert

Mccrossen: hat „Erweiterung der Social Bookmarklinks“ nach „Social Bookmarklinks erweitern“ verschoben: So ist es in der Übersicht besser zu suchen.

2011-05-11T12:23:54Z

hat „Erweiterung der Social Bookmarklinks“ nach „Social Bookmarklinks erweitern“ verschoben: So ist es in der Übersicht besser zu suchen.

Mccrossen: Kompletten Artikel aus PDF übernommen und formatiert

2011-05-11T12:21:18Z

Kompletten Artikel aus PDF übernommen und formatiert

Neue Seite

[[Category:Admin HOWTOS]]

{{msgError|Zu jedem Schritt gehören noch Screenshots, welche ich bei gelegenheit mal mit hoch lade und einbinden werde.
Bis dahin ist die vollständige Anleitung inkl. Bilder hier zu finden: [[http://www.webmedien-westsachsen.de/contao-anleitungen.php?file=tl_files/downloads/Contao-social-bookmarks.pdf http://www.webmedien-westsachsen.de/contao-anleitungen.php?file=tl_files/downloads/Contao-social-bookmarks.pdf]] --[[Benutzer:Mccrossen|Mccrossen]] 14:21, 11. Mai 2011 (CEST) }}

== Erweiterung social_bookmarks installieren ==
Zunächst benötigen wir die Erweiterung '''[social_bookmarks]''', welche wir in der Erweiterungsverwaltung im Backend von Contao installieren.
{{Hinweis|Die aktuelle Version der Erweiterung social_bookmarks lässt sich nicht installieren, bitte verwenden Sie die Version „1.1.0 beta1“.}}

== Templates importieren ==

Anschließend gehen wir in die Templateverwaltung und importieren folgende Templates:
* mod_article.tpl
* mod_social_bookmarks.tpl

== Frontend-Modul anlegen ==
Nun legen wir ein neues Frontend-Modul im aktuellen Theme an. Zunächst wählen wir einen Titel für das Frontend-Modul, in unserem Beispiel „Bookmarks“. Anschließend wählen wir unter den Modultyp „Social Bookmarks“ aus und bestätigen die Eingabe mit „Speichern und schließen“.
An dieser Stelle müssen wir uns noch die ID des Moduls merken, in unserem Fall die '''19'''.
== Template mod_article.tpl editieren ==
Jetzt gehen wir in der Templateübersicht auf den Button „Die Datei "templates/mod_article.tpl " bearbeiten“. Dieser ist über dieses Icon hinter dem Templatename:
Im Quelltext wird folgende Zeile zwischen dem „endif“ vom Twitter-Link und dem “ </div>“ eingefügt:
<source lang="php">
{{insert_module::19}}
</source>
Die Zahl '''19''' spiegelt die Frontend-Modul ID wieder, welche wir uns eben gemerkt haben.

== Template mod_social_bookmarks.tpl editieren ==

Hier kürzen wir den Quelltext im Quelltexteditor sehr stark ein.
Wir benötigen nur folgende Zeilen, der Restliche Quelltext kann gelöscht werden:
<source lang="php">
<?php foreach ($this->bookmarks as $bookmark): ?>
<a href="<?php echo $bookmark['url']; ?>{{env::path}}{{env::request}}" title="<?php echo $bookmark['name']; ?>" class="<?php echo $bookmark['class']; ?>" <?php if ($bookmark['style']): ?> style="<?php echo $bookmark['style']; ?>"<?php endif; ?> onclick="window.open(this.href); return false;"><img src="<?php echo $bookmark['icon']; ?>" alt="<?php echo $bookmark['name']; ?>" /> <?php echo $bookmark['text']; ?></a>
<?php endforeach; ?>
</source>

== Bookmark-Icons importieren ==

Die Icons der Social Bookmarks auf das Contao System uploaden.
In unserem Beispiel in den Ordner „/tl_files/social_bookmarks“

=== Beispiel importieren ===

Die Icons aus diesem Beispiel kann man unter www.webmedien-westsachsen.de/contao-anleitungen.php downloaden.

== Social Bookmarks hinzufügen ==

Nun müssen wir die Social Bookmarks im Contao anlegen. Dazu im Menüpunkt Social Bookmarks die einzelnen Links erzeugen.

=== Beispiel importieren ===

Um unser Beispiel schnell zu importieren, einfach folgende SQL-Code auf der Datenbank ausführen:
<source lang="sql">
INSERT INTO `tl_social_bookmarks` (`id`, `name`, `icon`, `url`, `tstamp`, `text`, `style`, `cssID`, `published`) VALUES
(1, 'Mister Wong', 'tl_files/social_bookmarks/mr-wong-icon.gif', 'http://www.mister-wong.de/', 1286995229, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1'),
(2, 'Google', 'tl_files/social_bookmarks/google-icon.gif', 'http://www.google.com/bookmarks/mark?op=add[&]hl=de[&]bkmk=', 1286998377, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1'),
(3, 'Linkarena', 'tl_files/social_bookmarks/linkarena.gif', 'http://linkarena.com/bookmarks/addlink/?url=', 1286997176, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1'),
(4, 'Delicious', 'tl_files/social_bookmarks/delicious-icon.gif', 'http://del.icio.us/post?v=2[&]url=', 1286998390, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1'),
(5, 'Webnews', 'tl_files/social_bookmarks/webnews.gif', 'http://www.webnews.de/einstellen?url', 1286997314, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1'),
(6, 'Kledy', 'tl_files/social_bookmarks/kledy.gif', 'http://www.kledy.de/submit.php?url=', 1286998847, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1'),
(7, 'StudiVZ', 'tl_files/social_bookmarks/icon_studivz.png', 'http://studivz.net/Suggest/Selection/?u=', 1287081746, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1'),
(8, 'MeinVZ', 'tl_files/social_bookmarks/icon_meinvz.png', 'http://meinvz.net/Suggest/Selection/?u=', 1287081750, '', '', 'a:2:{i:0;s:0:"";i:1;s:0:"";}', '1');
</source>

== Links in Artikel anzeigen ==

Jetzt muss noch die Bookmarklinks in den gewünschten Artikeln angezeigt werden. Dazu wählt man sich die Artikeleigenschaften des gewünschten Artikels aus und macht bei min. einer Option unter Syndikation einen Haken. In unseren Beispielen habe ich bei allen Optionen einen Haken gemacht.
Jetzt werden über den Artikeln die Social Bookmarklinks angezeigt.

== Hinweise ==

=== Valides XHTML ===

Damit diese Erweiterung valides XHTML zurück gibt müssen wir im Quelltexteditor unter Templates in der Datei „mod_social_bookmarks.tpl“ diesen Teil entfernen:
<source lang="html4strict">
target="_blank"
</source>
und gegen diesen ersetzen
<source lang="html4strict">
onclick="window.open(this.href); return false;"
</source>
Zudem gibt es das Problem, dass der Quelltexteditor beim Laden sämtliche „amp;” entfernt. Diese müssen wir in der Templatedatei „mod_article.tpl“ im Facebooklink und im Twitterlink wieder hinzufügen.

==== Valider Facebooklink ====

<source lang="php">
href="share.php?p=facebook&u=<?php echo $this->encUrl; ?>&t=<?php echo $this->encTitle; ?>"
</source>

==== Valider Twitterlink ====

<source lang="php">
href="share.php?p=twitter&u=<?php echo $this->encUrl; ?>&t=<?php echo $this->encTitle; ?>"
</source>

{{Hinweis|Nach dem Speichern das Template „mod_article.tpl“ nicht erneut im Quelltexteditor öffnen und speichern, ohne die „amp;“ wieder in den URLs hinzuzufügen.}}
{{Anmerkung|Wenn man die Quelltexte hier aus der Anleitung herauskopiert sind die Facebook- und Twitterlinks alle bereits valide.}}

=== Linkblock am Ende des Artikels ===

Damit die Bookmarklinks nicht vor, sondern nach dem Artikel angezeigt werden, muss folgendes in der Templatedatei „mod_article.tpl“ stehen:
<source lang="php">
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php echo $this->contentElements; ?>
<?php if ($this->printable): ?>

<div class="pdf_link">
<?php if ($this->printButton): ?>
<a href="<?php echo $this->print; ?>" rel="nofollow" title="<?php echo $this->printTitle; ?>" onclick="window.print(); return false;"><img src="system/modules/frontend/html/print.gif" width="16" height="16" alt="" /></a>
<?php endif; ?>
<?php if ($this->pdfButton): ?>
<a href="<?php echo $this->href; ?>" rel="nofollow" title="<?php echo $this->pdfTitle; ?>"><img src="system/modules/frontend/html/pdf.gif" width="16" height="16" alt="" /></a>
<?php endif; ?>
<?php if ($this->facebookButton): ?>
<a href="share.php?p=facebook&u=<?php echo $this->encUrl; ?>&t=<?php echo $this->encTitle; ?>" rel="nofollow" title="<?php echo $this->facebookTitle; ?>" onclick="window.open(this.href, '', 'width=760,height=570,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;"><img src="system/modules/frontend/html/facebook.gif" width="16" height="16" alt="" /></a>
<?php endif; ?>
<?php if ($this->twitterButton): ?>
<a href="share.php?p=twitter&u=<?php echo $this->encUrl; ?>&t=<?php echo $this->encTitle; ?>" rel="nofollow" title="<?php echo $this->twitterTitle; ?>" onclick="window.open(this.href, '', 'width=800,height=600,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;"><img src="system/modules/frontend/html/twitter.gif" width="16" height="16" alt="" /></a>
<?php endif; ?>
{{insert_module::36}}
</div>

<?php endif; ?>
<?php if ($this->backlink): ?>

<p class="back"><a href="<?php echo $this->backlink; ?>" title="<?php echo $this->back; ?>"><?php echo $this->back; ?></a></p>

<?php endif; ?>
</div>
</source>

=== Links horizontal anzeigen ===

Um die Links wie in unserem Beispiel horizontal und nicht vertikal anzeigen zu lassen, sollte man folgenden CSS-Code zu seiner CSS hinzufügen:
<source lang="css">
div#main div.pdf_link a img { display:inline; }
</source>

@@ Zeile 19: / Zeile 19: @@
 Nun legen wir ein neues Frontend-Modul im aktuellen Theme an. Zunächst wählen wir einen Titel für das Frontend-Modul, in unserem Beispiel „Bookmarks“. Anschließend wählen wir unter den Modultyp „Social Bookmarks“ aus und bestätigen die Eingabe mit „Speichern und schließen“.
 An dieser Stelle müssen wir uns noch die ID des Moduls merken, in unserem Fall die '''19'''.
 == Template mod_article.tpl editieren ==
 Jetzt gehen wir in der Templateübersicht auf den Button „Die Datei "templates/mod_article.tpl " bearbeiten“. Dieser ist über dieses Icon hinter dem Templatename:

@@ Zeile 14: / Zeile 14: @@
 * mod_article.tpl
 * mod_social_bookmarks.tpl
 == Frontend-Modul anlegen ==

@@ Zeile 7: / Zeile 7: @@
 Zunächst benötigen wir die Erweiterung '''[social_bookmarks]''', welche wir in der Erweiterungsverwaltung im Backend von Contao installieren.
 {{Hinweis|Die aktuelle Version der Erweiterung social_bookmarks lässt sich nicht installieren, bitte verwenden Sie die Version „1.1.0 beta1“.}}
 == Templates importieren ==

@@ Zeile 30: / Zeile 30: @@
 Wir benötigen nur folgende Zeilen, der Restliche Quelltext kann gelöscht werden:
 <source lang="php">
 <?php foreach ($this->bookmarks as $bookmark): ?>
 <a href="<?php echo $bookmark['url']; ?>{{env::path}}{{env::request}}" title="<?php echo $bookmark['name']; ?>" class="<?php echo $bookmark['class']; ?>" <?php if ($bookmark['style']): ?> style="<?php echo $bookmark['style']; ?>"<?php endif; ?> onclick="window.open(this.href); return false;"><img src="<?php echo $bookmark['icon']; ?>" alt="<?php echo $bookmark['name']; ?>" /> <?php echo $bookmark['text']; ?></a>
 <?php endforeach; ?>
 </source>

← Nächstältere Version	Version vom 11. Mai 2011, 12:23 Uhr
(kein Unterschied)