DropletsExtension - Webseiten optimal in den sozialen Netzwerken präsentierenDropletsExtension

Wer hat das noch nicht erlebt? Der neue Artikel ist endlich fertig, ist durch passende Fotos aufgewertet und frisch auf der Website publiziert. Es bleibt nur noch, einen Link auf der Facebook Fanpage einzufügen um die zahlreichen Follower auf das neue Angebot aufmerksam zu machen.

Leider fällt das Resultat nicht wie gewünscht aus: Facebook scheint sich willkürlich irgendein Bild von der Webseite zu greifen aber nicht das liebevoll ausgesuchte aus dem Artikel. Das Ergebnis ist ernüchternd und nicht publikumswirksam. Der bei Google+ gepostete Link sieht auch nicht besser aus.

Tatsächlich greifen sich die die sozialen Netzwerke beim Einfügen eines Links das erstbeste verfügbare Bild aus der Quelle und platzieren es zusammen mit der Kurzbeschreibung neben der URL auf den Artikel.

Es sei denn, man benutzt das Open Graph Protocol und sagt Facebook, Google+ & Co., welche Informationen sie verwenden sollen.

Die DropletsExtension können genau das und noch einiges mehr. Wir schauen uns in diesem Artikel jedoch nur die spezielle Funktion der DropletsExtension zur Steuerung der Seiteninformationen und der Open Graph Schnittstelle an.

Bei t3n beschreibt der Artikel Social-Media-Sharing: So optimierst du deine Seite für Google+ und Facebook wunderbar die technischen Grundlagen, um die sich die DropletsExtension für Sie kümmern und die Ihnen die gesamte Optimierung abnehmen.

Ein wenig Vorarbeit müssen Sie jedoch leisten, damit Ihnen die DropletsExtension alles Weitere abnehmen können:

Damit die DropletsExtension die Seiteninformationen steuern können, ist es erforderlich, dem Template Ihrer Website die Funktion print_page_head() hinzuzufügen.

Seitenoptionen ändern (Abbildung: LEPTON CMS)Vereinfacht ausgedrückt setzt die Designvorlage alle Informationen, die von dem Content Management System zur Verfügung gestellt werden, so um, dass sie von einem Browser dargestellt werden können. Der Kopf der ausgegebenen Seite enthält ergänzende Angaben:

Diese Metadaten sind u.a. für die Suchmaschinenoptimierung von Bedeutung. Der Seitentitel und die Kurzbeschreibung werden von Google z.B. in den Suchergebnissen herangezogen; Linksammlungen, Facebook und andere Dienste greifen ebenfalls auf diese über das Template bereitgestellten Meta-Tags zurück. In WebsiteBaker oder LEPTON CMS legen Sie diese Informationen über die Einstellungen bzw. Optionen der jeweiligen Seite fest (siehe Screenshot).

In der Designvorlage für Ihre Website finden Sie die folgenden Meta-Elemente:

<meta name= "description" content= "<?php page_description(); ?>" />
<meta name= "keywords" content= "<?php page_keywords(); ?>" />
<title><?php page_title ( '' , '[PAGE_TITLE]' ) ; ?></title>

Ersetzen Sie diese durch die folgenden Zeilen:

<?php
  if ( file_exists ( WB_PATH. '/modules/droplets_extension/interface.php' ) ) {
    require_once ( WB_PATH. '/modules/droplets_extension/interface.php' ) ;
    print_page_head ( true ) ;
  }
  else {   ?>
    <meta name= "description" content= "<?php page_description(); ?>" />
    <meta name= "keywords" content= "<?php page_keywords(); ?>" />
    <title><?php page_title ( '' , '[PAGE_TITLE]' ) ; ?></title>
  <?php }
?>

Dadurch übergeben Sie die Steuerung der Metadaten an die Funktion print_page_head() aus den DropletsExtension.

Informationen zum Aufbau sowie zum Bearbeiten von Templates finden Sie im offiziellen (WebsiteBaker) Designerhandbuch. (Hinweis: Derzeit ist dieser Link leider "tot".)

Wichtig: print_page_head() verfügt über einen Schalter um die Ausgabe der Open Graph Informationen zu steuern:

Durch print_page_head(true) erzeugter QuelltextDie Funktion gibt bei eingeschalteter Open Graph Unterstützung nicht nur die Informationen zum Seitentitel, zur Kurzbeschreibung und den Schlüsselbegriffen aus (im Screenshot Grün hervorgehoben), sondern darüber hinaus eine ganze Reihe von ergänzenden Informationen (im Screenshot Gelb hervorgehoben).

Facebook, Google+ etc. wird u.a. mitgeteilt, welche Abbildung verwendet werden soll.

Hoppla! Woher kommt denn auf einmal diese Information?

Ganz einfach: DropletsExtension geht davon aus, daß das erste Bild im jeweiligen Artikel für die Darstellung in den sozialen Netzwerken verwendet werden soll, das passt fast immer - hier bei diesem Artikel also das Bild mit dem Tropfen ganz oben.

Und wenn es doch einmal nicht passt? Kann ich das ändern?

Klar. Ab sofort können Sie über die Schlüsselwörter ( keywords ) der jeweiligen Seite steuern, welche Grafik oder welches Foto verwendet werden soll:

og:image=http://IhreDomain.de/media/phpmanufaktur-logo.png

Sie geben als weiteren Schlüsselbegriff og:image= gefolgt von der vollständigen URL der gewünschten Abbildung an und Facebook wird dieses Bild auch ganz brav verwenden (Google+ ebenfalls).

Da dieses zweckentfremdete Schlüsselwort für die Suchmaschinen keinerlei Bedeutung hat, wird es von print_page_head() bei der Ausgabe einfach wieder entfernt.

Da es immer wieder mal vorkommen kann, dass ein Artikel keine Abbildung enthält, ist es möglich, den DropletsExtension mitzuteilen, daß in diesen Fällen eine bestimmte Grafik, z.B. das Logo zu verwenden ist.

Hierzu erstellen Sie z.B. mit Notepad++ oder einem beliebigen Texteditor eine neue Textdatei und fügen in diese eine og:image Anweisung ein:

{
  "og:image" : "https://IhreDomain.de/media/phpmanufaktur-logo.png"
}

Speichern Sie die Datei als config.json und übertragen Sie diese Konfigurationsdatei per FTP auf Ihren Webserver in das Verzeichnis /modules/droplets_extension/ .

Damit haben Sie einen Fallback eingerichtet. Findet print_page_head() kein Bild und haben Sie bei den Einstellungen der Seite keine Grafik angegeben verwendet die Funktion die in der config.json angegebene Abbildung.

Was können Sie sonst noch steuern und beeinflussen?

Bei den Open Graph Metadaten befindet sich auch eine Angabe zum Titel der Website. print_page_head() holt sich diese Information aus den Optionen ⇒ Allgemeine Optionen ⇒ Webseitentitel von WebsiteBaker bzw. LEPTON CMS.

Sie können diese Angabe mit og:website_title in der config.json überschreiben:

{
  "og:image" : "http://phpmanufaktur.info/media/phpmanufaktur-logo.png" ,
  "og:website_title" : "Blog: Ralf Hertsch & befreundete Autoren"
}

Darüber hinaus können Sie bei den Seitenoptionen die folgenden Schlüsselbegriffe verwenden:

Schlüsselbegriffe werden immer mit einem Komma voneinander getrennt. Die Schlüsselbegriffe zu Open Graph können an beliebiger Stelle stehen. Notieren Sie zunächst den Bezeichner, z.B. og:type , unmittelbar gefolgt von einem Gleichheits Zeichen und dieses wiederum unmittelbar gefolgt von dem gewünschten Wert:

og:type= website

Beispielhafte Angabe von Schlüsselbegriffen:

Open Graph, og:image=https: //blog.phpmanufaktur.de/media/content/general/phpmanufaktur-logo.png , sozial, Netzwerk, Facebook, Google, Plus, Link , URL, Beschreibung, Schlüsselwort, SEO, SEM

in diesem Fall wird die mit og:image angegebene Grafik verwendet.

Sie sehen, mit den DropletsExtension steht Ihnen ein sehr leistungsfähiges Werkzeug zur Verfügung um Ihre Veröffentlichungen in den sozialen Netzwerken optimal zu präsentieren.

DropletsExtension - der Nachbrenner für ihre Code-Schnipsel

Es gibt Leute, die behaupten Droplets machen süchtig. Dafür gibt es gute Gründe, ich kenne kein anderes Content Management System, das über eine ähnlich leistungsfähige und flexible Möglichkeit verfügt an einer beliebigen Stelle mit einem einfachen Befehl Datenbankabfragen und Programmcode einzubinden.

Solange Droplets dazu verwendet werden beispielsweise mitten im Fliesstext auszurechnen, dass es noch Tage dauert, bis das Christkind wieder vor der Tür steht, also kleine und einfache Berechnungen oder Datenbankabfragen durchzuführen, ergeben sich daraus keinerlei Nachteile. Droplets werden jedoch auch als Schnittstelle für vollständige Anwendungen genutzt und bilden z.B. eine Brücke zwischen einem Admin-Tool im Backend und der Interaktion mit dem Frontend.

Hieraus ergeben sich neue und sehr anpassungsfähige Anwendungsmöglichkeiten. So können Termine und Veranstaltungen mit kitEvent zentral und übersichtlich mit Hilfe eines Admin-Tools verwaltet und organisiert werden, die Ausgabe erfolgt an unterschiedlichen Stellen auf der Website. Diese Flexibilität wird durch Droplets überhaupt erst möglich.

Wo ist der Haken dabei?

Die Platzhalter für die Droplets werden unmittelbar vor der Anzeige einer Webseite herausgefiltert, der Code des Droplets ausgeführt und das Ergebnis des Mini-Programms an Stelle des Platzhalters auf der Seite eingefügt und die fertige Webseite danach im Browser angezeigt:

Diese Nachteile behebt DropletsExtension vollständig, der Programmierer erhält eine Schnittstelle über die er seinem Droplet die gewünschten Fähigkeiten zur Verfügung stellen kann.

Wie funktioniert es?

Der erste Schritt besteht darin, das Seitenmodul DropletsExtension zu installieren. Dieses Seitenmodul erfüllt keinen unmittelbar sichtbaren Zweck, es muss vorhanden sein und es muss letztlich genau einmal auf irgendeiner Seite als zusätzlicher Abschnitt eingebunden sein. DropletsExtension bildet eine Brücke zwischen beliebigen Droplets und der Suchfunktion des Content Management System. Hierfür stellt es den Droplets ein Interface zur Verfügung.

Ein Droplet in die WebsiteBaker Suchfunktion einbinden

Zunächst muss das Droplet das DropletsExtension Interface einbinden:

// Connect with DropletsExtension Interface
if ( file_exists ( WB_PATH. '/modules/droplets_extension/interface.php' ) ) {
  require_once ( WB_PATH. '/modules/droplets_extension/interface.php' ) ;
}

Der nächste Schritt besteht darin, dass das Droplet sich bei DropletExtension für die Suchfunktion des CMS registriert:

// Register Droplet for the WebsiteBaker Search Function
if ( function_exists ( 'is_registered_droplet_search' ) && !is_registered_droplet_search ( 'droplet_name' , PAGE_ID ) ) {
  register_droplet_search ( 'droplet_name' , PAGE_ID, 'module_directory' ) ;
}

Die Funktion is_registered_droplet_search() dient dazu abzufragen, ob das angegebene Droplet bereits für die Suche in WebsiteBaker bzw. LEPTON CMS registriert ist, register_droplet_search() dient dazu das Droplet für die Suche anzumelden. Verwendet werden hierbei drei Parameter:

Die WebsiteBaker und LEPTON Suche arbeitet in zwei Schritten. Im ersten Schritt werden die Seiteninhalte durchsucht und im zweiten Schritt erhalten Seitenmodule (und nur diese!) die über eine search.php im Modulverzeichnis verfügen eine Aufforderung die Inhalte bereitzustellen, die bei der Suche berücksichtigt werden sollen. DropletExtension reicht diese Aufforderung über seine eigene search.php an die jeweiligen Droplets durch.

Hierzu sucht DropletExtension im Modulverzeichnis der registrierten Droplets nach der Datei droplet.extension.php und in dieser Datei nach der Funktion module_directory_droplet_search($page_id, $page_url) - wobei module_directory durch den tatsächlichen Verzeichnisnamen des jeweiligen Addon zu ersetzen ist! DropletExtension liefert der Funktion die $page_id der Seite für die ein Suchergebnis zu liefern ist und zusätzlich mit $page_url die vollständige URL der Seite.

Als Rückgabe erwartet DropletExtension eine Gruppe von assoziativen Arrays mit der Struktur:

foreach ( $items as $item ) {
  $result & #91;&#93; = array(
    'url'            => $page_url ,      // URL der Seite, die die Fundstelle anzeigt 
    'params'         => $params ,        // zusaetzliche Parameter die uebergeben werden sollen
    'title'          => $title ,         // Titel der Fundstelle
    'description'    => $description ,   // Kurzbeschreibung der Fundstelle
    'text'           => $text ,          // der zu durchsuchende Text der Fundstelle
    'modified_when' => $modified_when ,  // UNIX Timestamp
    'modified_by'    => $modified_by     // User ID
  ) ;
}

Wobei die Funktion module_directory_droplet_search($page_id, $page_url) einfach alle in Frage kommenden Fundstellen zurückliefern soll - die eigentliche Suche wird von der WebsiteBaker Suchfunktion durchgeführt, die hierzu auf das Feld ' text ' zugreift. Liefern Sie der Suchfunktion in dem Feld ' text ' plain text ohne HTML Formatierungen. 

In dem Addon kitEvent sieht der vollständige Funktionsaufruf so aus:

function kit_event_droplet_search ( $page_id , $page_url ) {
  global $dbEvent ;
  global $dbEventItem ;
  global $parser ;

  $SQL = sprintf ( "SELECT * FROM %s,%s WHERE %s.%s=%s.%s AND %s='%s' ORDER BY %s DESC" ,
                  $dbEvent -> getTableName ( ) ,
                  $dbEventItem -> getTableName ( ) ,
                  $dbEvent -> getTableName ( ) ,
                  dbEvent:: field_event_item ,
                  $dbEventItem -> getTableName ( ) ,
                  dbEventItem:: field_id ,
                  dbEvent:: field_status ,
                  dbEvent:: status_active ,
                  dbEvent:: field_event_date_from ) ;
  $events = array ( ) ;
  if ( ! $dbEvent -> sqlExec ( $SQL , $events ) ) {
    trigger_error ( sprintf ( '&#91;%s - %s&#93; %s' , __FUNCTION__ , __LINE__ , $dbEvent -> getError ( ) ) , E_USER_ERROR ) ;
    return false ;
  }
  $result = array ( ) ;
  $htt_path = WB_PATH. '/modules/' . basename ( dirname ( __FILE__ ) ) . '/htt/' ;
  $tpl_title = new Dwoo_Template_File ( $htt_path . 'search.result.title.htt' ) ;
  $tpl_description = new Dwoo_Template_File ( $htt_path . 'search.result.description.htt' ) ;
  foreach ( $events as $event ) {
    $result & #91;&#93; = array(
      'url' => $page_url ,
      'params' => http_build_query ( array ( eventFrontend:: request_action => eventFrontend:: action_event ,
                                         eventFrontend:: request_event => eventFrontend:: view_id ,
                                         eventFrontend:: request_event_id => $event & #91;dbEvent::field_id&#93;,
                                         eventFrontend:: request_event_detail => 1 ) ) ,
      'title' => $parser -> get ( $tpl_title , array ( 'date_time' => sprintf ( '%s %s' , date ( event_cfg_datetime_str, strtotime ( $event & #91;dbEvent::field_event_date_from&#93;)), event_text_hour),
                                                'title' => $event & #91;dbEventItem::field_title&#93;)),
      'description' => $parser -> get ( $tpl_description , array ( 'description' => strip_tags ( $event & #91;dbEventItem::field_desc_short&#93;))),
      'text' => strip_tags ( $event & #91;dbEventItem::field_desc_short&#93;).' '.strip_tags($event&#91;dbEventItem::field_desc_long&#93;),
      'modified_when' => strtotime ( $event & #91;dbEvent::field_timestamp&#93;),
      'modified_by'   => 1 // admin
    ) ;
  }
  return $result ;
} // kit_event_droplet_search()

 

Das Ergebnis kann sich sehen lassen.

Die Seitenbeschreibung durch ein Droplet festlegen lassen

Damit die Beschreibung einer Seite beliebig verändert werden kann, ist es erforderlich das Template der Website in diese Dynamik einzubeziehen. Hierzu dient eine spezielle Funktion von DropletsExtension die anstatt der Standard Aufrufe für die Seitenbeschreibung, Schlüsselwörter und den Seitentitel eingebunden wird.

Ersetzen Sie hierzu im Template der Website die Aufrufe:

<meta name= "description" content= "<?php page_description(); ?>" />
<meta name= "keywords" content= "<?php page_keywords(); ?>" />
<title><?php page_title ( '' , '[WEBSITE_TITLE]' ) ; ?></title>

durch die folgenden Zeilen:

<?php
  if ( file_exists ( WB_PATH. '/modules/droplets_extension/interface.php' ) ) {
    require_once ( WB_PATH. '/modules/droplets_extension/interface.php' ) ;
    print_page_head ( ) ;
  }
  else { ?>
    <meta name= "description" content= "<?php page_description(); ?>" />
    <meta name= "keywords" content= "<?php page_keywords(); ?>" />
    <title><?php page_title ( '' , '&#91;WEBSITE_TITLE&#93;' ) ; ?></title>
  <?php }
?>

Die Funktion print_page_head() funktioniert vom Prinzip her wie das bekannte simplepagehead() von Chio Maisriml und unterstützt ebenfalls Topics sowie das News Modul.

Als nächstes definieren Sie in der Datei droplet.extension.php die Funktion module_directory_droplet_header($page_id) , wobei Sie module_directory wieder durch den tatsächlichen Verzeichnisnamen des jeweiligen Addon ersetzen.

DropletsExtension ruft die Funktion module_directory_droplet_header($page_id) auf und erwartet die Rückgabe eines assoziativen Array, das folgende Angaben enthält:

$result = array (
  'title'        => $title ,        // Seitentitel
  'description' => $description , // Kurzbeschreibung
  'keywords'     => $keywords       // Schluesselwoerter
) ;

Zu guter Letzt muss sich das Droplet noch bei DropletsExtension registrieren:

if ( function_exists ( 'is_registered_droplet_header' ) && !is_registered_droplet_header ( 'droplet_name' , PAGE_ID ) ) {
  register_droplet_header ( 'droplet_name' , PAGE_ID, 'module_directory' ) ;
}

... und schon kann das Droplet die Seitenbeschreibung selbst nach Belieben festlegen.

Automatisch ein Cascading Stylsheet für das Droplet laden

Jetzt fehlt nur noch die Möglichkeit, dass automatisch ein bestimmtes CSS-Stylesheet für das Droplet geladen wird. Die Voraussetzung hierfür ist, dass die Funktion print_page_head() im Template der Website eingebunden ist.

Das Droplet registriert einfach das gewünschte Template bei DropletsExtension:

if ( function_exists ( 'is_registered_droplet_css' ) && !is_registered_droplet_css ( 'droplet_name' , PAGE_ID ) ) {
  register_droplet_css ( 'droplet_name' , PAGE_ID, 'module_directory' , 'frontend.css' ) ;
}

Die angegebene CSS-Datei muss sich im Verzeichnis des jeweiligen Moduls befinden.

Automatisch eine JavaScript Datei für das Droplet laden

Die Einbindung einer JavaScript Datei für das Droplet funktioniert genauso einfach. Auch hier ist die Voraussetzung, dass die Funktion print_page_head() im Template der Website eingebunden ist:

if ( function_exists ( 'is_registered_droplet_js' ) && !is_registered_droplet_js ( 'droplet_name' , PAGE_ID ) ) {
  register_droplet_js ( 'droplet_name' , PAGE_ID, 'module_directory' , 'javascript.js' ) ;
}

Die angegebene JavaScript-Datei muss sich im Verzeichnis des jeweiligen Moduls befinden.