Hauptinhalt

Soziale Netzwerke

letzte Aktualisierung der Seite: Version 2.17.1

JavaScript-Einbindung

Quellcode

window.additionalComponent.load('socialmedia', {
    el: '[data-component="686871687"]'
});

Parameter und Attribute

Funktionsaufruf - Zeile 3:

Name Bedeutung Wert Obligatorisch
data-component Attribut des HTML-Knotens, an dem die Social Media-Komponente initialisiert wird. alphanumerischer Wert JA

 

HTML-Einbindung

Quellcode

<div class="box box-loading" data-element="social-media-wrapper">
    <h3 class="box-header">Twitterbox</h3>
    <!--                           -->
    <!-- Auswahlbereich des Kanals -->
    <!--                           -->
     <div class="box-dropdown dropdown"
         data-element="box-dropdown"
         data-dropdown-data="//www.sachsen.de/beispiel_socialmedia.js"
         data-dropdown-data-method="getSocialMediaData"
         data-dropdown-data-method-key="twitter"
         data-dropdown-template="<li><a href='#dropdownMenu-6841435446' data-element='dropdown-value' data-id='<%= id %>' data-value='<%= anchor %>' data-additional='<%= name %>'><%= titel %></a></li>"
         id="dropdownMenuWrapper-6841435446">
         <!--                         -->
         <!-- Auswahlliste der Kanäle -->
         <!--                         -->
         <button class="btn btn-default dropdown-toggle"
                type="button"
                id="dropdownMenu-6841435446"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                data-for-id="twitter-timeline">
            Twitterkanal wechseln
        </button>
        <ul class="dropdown-menu list-unstyled" aria-labelledby="dropdownMenu-6841435446" data-dropdown-filter='["channel-8","channel-9"]'/>
    </div>
    <!--                                             -->
    <!-- Inhaltsbereich zur Anzeige des Kanalinhalts -->
    <!--                                             -->
    <div class="box-body">
        <div class="box-media">
            <div data-social-platform="twitter"
                 data-twitter-id="twitter-timeline"
                 data-component="686871687"/>
        </div>
    </div>
    <!--                            -->
    <!-- Footer mit Kanalverlinkung -->
    <!--                            -->
    <div class="box-footer">
        <ul class="list-links">
            <li>
                <a href="https://twitter.com/SachsenDe?lang=de">Sachsen.de twittert</a>
            </li>
        </ul>
    </div>
</div>

Parameter und Attribute

DIV-Tag - Zeile 1:

Attribut Bedeutung Wert Obligatorisch
data-element CSS-Klasse, gibt den Rahmen für die SocialMedia-Komponente vor. Innerhalb dieses Rahmens findet die SocialMedia-Anzeige und -Interaktion statt social-media-wrapper JA

DIV-Tag - Zeile 6:

Attribut Bedeutung Wert Obligatorisch
data-element Name der Auswahlbox. Dieser wird benötigt, um die Auswahlbox mit Einträgen zu füllen. Weiterhin wird die Auswahl dazu verwendet, um die Informationen aus dem SocialMedia-Kanal abzurufen. box-dropdown JA
data-dropdown-data Vollqualifizierte URL, unter der die Verbindungskonfiguration zu dem SocialMedia-Kanal abgerufen werden soll. URL JA
data-dropdown-data-method Name der Funktion, die aufgerufen wird, um die geladenen Verbindungskonfigurationen zu den SocialMedia-Kanälen zu erhalten. Muss der Angabe innerhalb der Quelldatei entscodechen.

alphanumerischer Wert

 JA
data-dropdown-data-method-key Name des Datensatzes aus den geladenen Verbindungskonfigurationen.

alphanumerischer Wert

 JA
data-dropdown-template Template, das mit dem Framework underscore.js geparst wird. Das Template beschreibt das Markup eines Eintrags innerhalb der Auswahlbox. Die Platzhalterelemente werden mit Daten aus der Quelldatei gefüllt. Ein Element muss innerhalb eines li-Knotens definiert sein. Der Templatecode aus oben genanntem Beispiel ist für die SocialMedia-Komponente zu verwenden.

underscore.js-Templatecode

 JA

BUTTON-Tag - Zeile 16:

Attribut Bedeutung Wert Obligatorisch
type HTML-Typ des Button-Elements. button JA
data-toggle Darstellungsweise des Button-Elements als Auswahlbox. dropdown JA
data-for-id Gibt das Element an, auf das sich der Button hinsichtlich der Datendarstellung/ -aktualisierung bezieht. Muss dem Attribut data-twitter-id bzw. data-facebook-id des Inhaltsbereich-DIV entscodechen.

alphanumerischer Wert

 JA

UL-Tag - Zeile 25:

Attribut Bedeutung Wert Obligatorisch
data-dropdown-filter Filter auf die Auswahlliste des Aufklappmenüs. Innerhalb eines Arrays werden die Verbindungskonfigurationen eines SocialMedia-Kanals aufgeführt, die in der Auswahl zur Verfügung stehen sollen. Der Wert innerhalb des Arrays entspricht dem Wert uid innerhalb der Verbindungskonfiguration. Wird nur ein Wert angegeben, so wird dieser direkt ausgewertet und die Auswahlbox ausgeblendet.

alphanumerischer Wert

JA

DIV-Tag - Zeile 32:

Attribut Bedeutung Wert Obligatorisch
data-social-platform Name der SocialMedia-Plattform. facebook oder twitter JA
data-facebook-id Wird die SocialMedia-Plattform Facebook eingebunden, so ist dieses Attribut mit einem Wert zu versehen. Dieser Wert muss dem Wert des Attributs data-for-id des Auswahlboxbereichs BUTTON entscodechen. facebook oder twitter BEDINGT
data-twitter-id Wird die SocialMedia-Plattform Twitter eingebunden, so ist dieses Attribut mit einem Wert zu versehen. Dieser Wert muss dem Wert des Attributs data-for-id des Auswahlboxbereichs BUTTON entscodechen. facebook oder twitter BEDINGT
data-component Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entscodechen. facebook oder twitter JA

 

Abhängigkeiten

  • jQuery
  • underscore
  • webs-ot-utils

Definition der Quelldatei

Die Quelldatei ist eine JavaScript-Funktion, die ein JSON zurückliefert. Die Quelldatei weist folgende Definition auf:

/* Name der Funktion, die durch die Komponente aufgerufen wird */
window.getSocialMedia = function () {
    /* Gibt die JSON-Objekte mit der Konfiguration der Kanäle zurück. Es kann auch nur eine Komponente, Twitter oder Facebook, enthalten sein. */
    return {
        /* Beispiel für einen Twitter-Kanal. Entspricht dem Wert des Attributs 'data-dropdown-data-method-key'*/
        twitter : [
            {
                /* Name des Twitter-Accounts */
                "name" : "SachsenDe",
                /* Text der in der Auswahlliste angezeigt wird */
                "titel" : "Sachsen.de",
                /* Text der im Footerbereich der Komponente angezeigt wird */
                "anchor" : "Sachsen.de twittert",
                /* Interne Verwendung. Muss innerhalb einer SocialMedia-Komponente eindeutig sein */
                "id" : "1705068523066903",
                /* ID, welche in data-dropdown-filter zur Auswahlfilterung genutzt wird */
                "uid" : "channel-8",
                /* Dient der internen Verwendung im OpenText-CMS. Kann in anderen Umgebungen auf true belassen werden. */
                "active" : true
            },{
                ... /* Weitere Twitter-Kanäle zur Darstellung in der Auswahlliste */
            }
        ],
        /* Beispiel für einen Facebook-Kanal. Entspricht dem Wert des Attributs 'data-dropdown-data-method-key' */
        facebook : [{
                /* Name des Facebook-Accounts */
                "name" : "Freistaat.Sachsen",
                /* Text der in der Auswahlliste angezeigt wird */
                "titel" : "Sachsen.de",
                /* Text der im Footerbereich der Komponente angezeigt wird */
                "anchor" : "Sachsen.de auf Facebook",
                /* Interne Verwendung. Muss innerhalb einer SocialMedia-Komponente eindeutig sein */
                "id" : "1705068523066903",
                /* ID, welche in data-dropdown-filter zur Auswahlfilterung genutzt wird */
                "uid" : "channel-8",
                /* Dient der internen Verwendung im OpenText-CMS. Kann in anderen Umgebungen auf true belassen werden. */
                "active" : true
            },{
                ... /* Weitere Facebook-Kanäle zur Darstellung in der Auswahlliste */
            }
        ]
    };
}
zurück zum Seitenanfang