Hast Du Dich bei Instagram schon einmal darüber geärgert, dass Du nur einen einzigen Link in Deiner Biografie anlegen kannst und sonst keinen? Wenn ja, dann bist Du sicher auch schon auf Linktree oder Flowpage als Alternative gestoßen. Beide Plattformen bieten einen Lösungsansatz, um die 1-Link-Regel von Instagram zu umgehen. Dazu wird durch die Plattform für jedes Benutzerkonto eine Landingpage erzeugt, die es euch ermöglicht, mehrere Links anzulegen – quasi euer persönliches Linkverzeichnis. Den Link zu dieser Seite könnt ihr nun in eure Instagram Bio einfügen und euren Instagram-Followern damit Zugang zu allen Links bieten, die ihr auf Insta postet. Hier erfährst Du, wie Du in wenigen Schritten mit WordPress eine kostenlose Alternative zu Linktree selbst umsetzen kannst. Ich habe das selbst in meinem B2B-Marketing Blog so gemacht und zeige Dir Schritt für Schritt, wie es geht.
Wenn Du für Deinen eigenen Blog keine Lust auf Linktree & Co. sowie auf Zusatzkosten hast, dann ist die nachfolgende Lösung eine kostenlose Top-Alternative für Dich. Klar, den Komfort und die zahllosen Möglichkeiten von Linktree und Flowpage bietet diese Lösung out of the box nicht, dafür kommt sie aber mit einem gewichtigen Vorteil. Denn mit dieser Lösung zeigt der Link von Instagram auf eure eigene Webseite und nicht auf eine x-beliebige Link-Plattform.
Schritt 1: WordPress – Custom Post Type
Es braucht gar kein aufwendiges Plugin, um diese Lösung mit WordPress zu erzeugen. Du kannst das Modul „Beiträge“ bzw. „Posts“ in einer angepassten Form wiederverwenden, in WordPress nennt sich das „Custom Post Type“. Denn alles, was Du für ein Link-Verzeichnis bzw. eine Linktree-Alternative in WordPress benötigst, ist bereits im Inhaltstyp „Post“ enthalten:
- Titel
- Link
- zeitgesteuertes Veröffentlichen
- Bild
- ggf. weiterführender Text
- Kategorien
- Schlagwörter
Strenggenommen braucht es nur den Link und das zeitgesteuerte Veröffentlichen, um die einfachste Version der Linktree-Alternative mit WordPress zu erstellen. Wenn Du mehr machen möchtest, geht auch das – dazu am Ende des Artikels mehr im Bereich Tipps & Tricks.
Custom Post Type in WordPress anlegen
Einen Custom Post Type in WordPress anzulegen ist auf verschiedene Weisen möglich, beispielsweise mit dem Freemium Plugin Custom Post Types UI oder mit dem nachstehenden Code, der einen Custom Post Type mit dem Namen Insta-Links erzeugt:
/**
* Post Type: Insta-Links.
*/
function register_my_instalinks() {
$labels = [
"name" => __( "Insta-Links" ),
"singular_name" => __( "Insta-Link" ),
"menu_name" => __( "Insta-Links" ),
"all_items" => __( "Alle Insta-Links" ),
"add_new" => __( "Neuer Insta-Link" ),
"add_new_item" => __( "Neuen Insta-Link hinzufügen" ),
"edit_item" => __( "Insta-Link bearbeiten" ),
"new_item" => __( "Insta-Link hinzufügen" ),
"view_item" => __( "Insta-Link anzeigen" ),
"view_items" => __( "Insta-Links anzeigen" ),
"search_items" => __( "Insta-Links durchsuchen" ),
"not_found" => __( "Keine Insta-Links gefunden" ),
"not_found_in_trash" => __( "Keine Insta-Links im Papierkorb gefunden" ),
"parent" => __( "Übergeordneter Insta-Link:" ),
"featured_image" => __( "Beitragsbild für diesen Insta-Link" ),
"set_featured_image" => __( "Beitragsbild für diesen Insta-Link festlegen" ),
"remove_featured_image" => __( "Beitragsbild für diesen Insta-Link enfernen" ),
"use_featured_image" => __( "Ausgewähltes Bild für diesen Insta-Link verwenden" ),
"archives" => __( "Insta-Link Archiv" ),
"insert_into_item" => __( "In Insta-Link einfügen" ),
"uploaded_to_this_item" => __( "Zum Insta-Link hochladen" ),
"filter_items_list" => __( "Insta-Links Liste filtern" ),
"items_list_navigation" => __( "Insta-Links Menu-Eintragsname" ),
"items_list" => __( "Insta-Links Liste" ),
"attributes" => __( "Insta-Links Attribute" ),
"name_admin_bar" => __( "Insta-Link" ),
"item_published" => __( "Insta-Link veröffentlicht" ),
"item_published_privately" => __( "Insta-Link privat veröffentlicht" ),
"item_reverted_to_draft" => __( "Insta-Link auf Entwurf zurückgesetzt" ),
"item_scheduled" => __( "Insta-Link geplant" ),
"item_updated" => __( "Insta-Link aktualisiert" ),
"parent_item_colon" => __( "Übergeordneter Insta-Link:" )
];
$args = [
"label" => __( "Insta-Links" ),
"labels" => $labels,
"description" => "Alternative zu Linktree mit zeitbasierter Veröffentlichung",
"public" => true,
"publicly_queryable" => false,
"show_ui" => true,
"show_in_rest" => false,
"rest_base" => "",
"rest_controller_class" => "WP_REST_Posts_Controller",
"has_archive" => true,
"show_in_menu" => true,
"show_in_nav_menus" => false,
"delete_with_user" => false,
"exclude_from_search" => false,
"capability_type" => "post",
"map_meta_cap" => true,
"hierarchical" => false,
"rewrite" => [ "slug" => "instalinks", "with_front" => true ],
"query_var" => true,
"supports" => [ "title", "editor", "thumbnail", "revisions" ],
"taxonomies" => [ "post_tag" ]
];
register_post_type( "instalinks", $args );
}
add_action( 'init', 'register_my_instalinks' );
Nun gibt es verschiedene Möglichkeiten, diesen Code unterzubringen. Eine wirklich effiziente und updatesichere Variante besteht darin, ein eigenes WordPress Plugin für angepasste Funktionen zu erstellen und diese dort abzulegen. Dadurch ist diese Variante auch geeignet, wenn Du Dein Theme wechseln möchtest und vielleicht nicht der Programmierer schlechthin bist. Wie das geht, wird in diesem Artikel erklärt.
Die Abkürzung sieht so aus:
1. Lege via FTP im Ordner /wp-content/plugins einen neuen Ordner my-own-functions an.
2. Erzeuge mit einem Texteditor Deiner Wahl eine Datei namens my-own-functions.php.
3. Kopiere nachfolgenden Codeblock in die Datei und speichere sie.
<?php /** * Plugin Name: My Own Functions * Description: Dieses Plugin enthält alle meine persönlich angepassten Funktionen. * Author: Vorname Nachname * Version: 1.0 */ /* --> FUNKTIONEN NACH DIESER ZEILE EINFÜGEN. <-- */ ?>
Anschließend die neu erzeugte Datei my-own-functions.php mit FTP in das neu angelegte my-own-functions Verzeichnis spielen. Wenn Du nun in Deine WordPress-Administration wechselst und dort in die Plugin-Verwaltung schaust, siehst Du ein neues, aber noch nicht aktiviertes Plugin. Sobald Du das Plugin aktivierst, stehen Dir die dort angelegten Funktionen (aktuell noch keine) zur Verfügung.
Kopiere nun den Code für den Custom Post Type in Dein neues Plugin und spiele die geänderte Datei wieder in das entsprechende Plugin-Verzeichnis. Wenn Du Dein Backend jetzt neu lädst, oder auf Dein Dashboard klickst, solltest Du einen neuen Eintrag mit dem Titel „Insta-Links“ in Deinem Hauptmenü links entdecken. Das ist das Zeichen dafür, dass Dein Custom Post Type erfolgreich angelegt wurde.
Schritt 2: Links in WordPress verwalten
Auch wenn Du es noch nicht sehen kannst, so hast Du jetzt schon den wichtigsten Schritt zu Deinem eigenen Linkverzeichnis gemacht. Alles, was jetzt kommt, macht es nur hübscher und besser benutzbar. Und damit zu einer echten Linktree-Alternative – nur eben unter Deiner Kontrolle, in Deinem WordPress.
Am besten legst Du nun Deinen ersten eigenen Link an. Das geht wie folgt:
Neuer Insta-Link
Klicke auf den Menüeintrag Insta-Link > Neuer Insta-Link, um einen neuen Insta-Link anzulegen.
Titel
Gebe einen Titel ein. Dieser ist nur für Dich zur Verwaltung und wird einem Benutzer nicht angezeigt.
Veröffentlichungsdatum
Wähle rechts neben „Sofort veröffentlichen“ den Link „Bearbeiten“. Gebe das Datum und die Uhrzeit ein, die mit Deinem Instagram-Post korrespondiert. Wenn Dein Instagram-Post am 14.04.2021 um 10.30h veröffentlicht wird, dann sollte Dein Link die gleiche Zeit tragen.
Textfeld
Im Textfeld kannst Du nun den Link anlegen, den Du Deinem Instagram-Post zuweisen möchtest. Das geht mit dem visuellen Editor, noch besser aber mit dem Texteditor, denn dann kann man die <p></p> entfernen, die einem sonst ggf. später das Layout zerhageln.
Wenn Du alles eingetragen hast, kannst Du rechts auf den Button „Planen“ bzw. „Veröffentlichen“ klicken – je nachdem, ob Du ein Datum in der Zukunft oder ein aktuelles/vergangenes Datum gewählt hast. Fertig. Dein erster Link ist angelegt, aber noch nicht für Benutzer sichtbar. Das ändern wir im nächsten Schritt! Vorher noch ein kurzer Hinweis zur Verwaltung von Links: Natürlich kannst Du mit Schlagworten und Kategorien arbeiten, wie bei normalen Posts auch. Wenn Du sehr viele Links hast, kannst Du sie damit noch besser segmentieren. Die Verwaltung Deiner Insta-Links funktioniert genauso, wie Du es von Beiträgen auch kennst. Du kannst Inhalte jederzeit ändern und dank der WordPress-Revisionen hast Du sogar eine Rollback-Möglichkeit zu einer vorherigen Version – das leistet Linktree nicht und macht Deine WordPress-Alternative noch wertvoller.
Custom Post Type „Insta-Links“ zur Linkverwaltung als kostenlose Linktree-Alternative.
Schritt 3: Seite und Shortcode anlegen
Was Du jetzt brauchst, ist die Seite, auf der Du Deine Links ausgeben möchtest und ein Shortcode, um Deinen Custom Post Type „Insta-Links“ auszugeben. Fangen wir mit dem Shortcode an. Am einfachsten ist es, wenn Du folgenden Code-Schnippsel nimmst und in Deine Custom Plugin Datei vom Anfang unterhalb des Custom Post Types und vor dem schließenden ?> einfügst:
/**
* WP-Shortcode zur Anzeige von Instagram links
*/
add_shortcode( 'instalinks', 'display_custom_post_type' );
function display_custom_post_type(){
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'instalinks',
'post_status' => 'publish',
'posts_per_page' => -1,
'paged' => $paged
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
echo '<h1>Links von Instagram</h1>';
echo '<p>Nachfolgend findet ihr eine Liste meiner Instagram-Beiträge und den weiterführenden Links. Die Links sind nach Datum absteigend sortiert, das aktuellste Datum steht also oben in der Liste.</p>';
echo '<table id="b2b-insta-table" class="table table-striped b2b-table">';
echo ' <thead>';
echo ' <tr>';
echo ' <th id="b2b-d">Datum</th>';
echo ' <th id="b2b-t" data-sortas="case-insensitive">Beitrag</th>';
echo ' </tr>';
echo ' </thead>';
echo ' <tbody>';
while ( $loop->have_posts() ) : $loop->the_post();
echo '<tr>';
echo ' <td headers="b2b-d">' . get_the_date('Y-m-d') . '</td>';
echo ' <td headers="b2b-t" data-sortvalue="' . wp_strip_all_tags( get_the_content() ) . '">' . get_the_content() . '</td>';
echo '</tr>';
endwhile;
echo ' </tbody>';
echo '</table>';
$total_pages = $loop->max_num_pages;
if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => '/page/%#%',
'current' => $current_page,
'total' => $total_pages,
'prev_text' => __('« zurück'),
'next_text' => __('weiter »'),
));
}
}
wp_reset_postdata();
}
Nicht vergessen, die geänderte Datei wieder per FTP hochzuladen. Jetzt steht Dir ein neuer Shortcode in WordPress zur Verfügung, um die Insta-Links als Linktree-Alternative im Frontend auszugeben. Alles, was Du jetzt noch tun musst, ist eine Seite in WordPress anzulegen und den Shortcode dort zu integrieren.
Folgende Schritte sind dazu notwendig:
Seite erstellen
Über Seiten > Erstellen eine neue Seite anlegen.
Titel
Den Seitentitel (z.B. Instagram-Links) anlegen.
Textbereich
Shortcode instalink (in eckigen Klammern [ ] geschrieben) im Textbereich einfügen bzw. als Gutenberg-Block (Shortcode) anlegen.
Permalink anpassen
Ggf. den Permalink anpassen, um eine kürzere URL zu erhalten (z.B. /links)
Wenn Du die Seite speichern und veröffentlichen, möchtest, kannst Du Deine Links im Frontend bereits aufrufen – allerdings noch ungestaltet in tabellarischer Form. Dazu einfach den Permalink in ein neues Browserfenster kopieren und dort aufrufen. Der in Schritt 2 angelegte Link sollte nun angezeigt werden bzw. alle Links, die Du im Bereich Insta-Links bisher veröffentlicht hast. Links mit einem Veröffentlichungstermin in der Zukunft werden selbstredend erst dann angezeigt, wenn dieser Zeitpunkt gekommen ist.
Seite anlegen, Shortcode einfügen, fertig: So einfach geht’s zur eigenen Linktree-Alternative.
Schritt 4: Aufhübschen
Jetzt ist es an der Zeit, die eigene WordPress-Linktree-Alternative aufzuhübschen und benutzerfreundlicher zu machen. Denn einem Nutzer, der einen älteren Instagram-Beitrag ansieht, hilft der weiterführende Link zum aktuellsten Beitrag nichts. Es wäre also gut, wenn die Linkliste durchsuchbar wäre und bei vielen Einträgen auch nicht endlos lang. Eine Sortierung wäre auch schön. Gut, dass es für solche Zwecke fertige JavaScript-Bibliotheken gibt. In diesem Fall lohnt sich die Integration des jQuery-Plugins jQuery.fancyTable.
Dazu einfach das Plugin in der minifizierten Version (fancyTable.min.js) herunterladen und anschließend die Datei in das Plugin-Verzeichnis von my-own-functions spielen. Da liegt ja auch schon die zugehörige Plugin-Datei. Und in diese Datei schreibst Du den nachstehenden Code wiederum hinter dem Shortcode-Code und vor dem schließenden ?>:
/**
* Load extra JavaScript
*/
function typed_script_init() {
define( 'MY_PLUGIN_PATH', plugin_dir_url( __FILE__ ) );
wp_enqueue_script( 'b2bjs-01', MY_PLUGIN_PATH . 'fancyTable.min.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'typed_script_init');
function typed_init() {
echo '<script>
jQuery(function($){
$("#b2b-insta-table").fancyTable({
sortColumn:0,
pagination:true,
perPage:25,
inputPlaceholder:"Suchen…",
sortOrder:"descending",
globalSearch:true
});
});</script>';
}
add_action('wp_footer', 'typed_init');
Mit Hilfe dieses Codes wird ein zusätzliches JavaScript (hier: fancyTable.min.js) in Deiner Webseite geladen. Stelle sicher, dass Du die jQuery-Bibliothek zuvor bereits geladen hast. Die meisten WordPress-Seiten nutzen bereits standardmäßig jQuery, da WordPress selbst die Bibliothek verwendet. Zudem ist im oben gezeigten Code auch die Initialisierung des Scripts enthalten und es werden Einstellungen für die Sortierung, Paginierung und das allgemeine Setting vorgenommen.
Wenn Du die Seite anschließend im Frontend aufrufst, sollte die Tabelle schon anders aussehen – aber immer noch ungestaltet. Füge deshalb in Deinem CSS bzw. im Backend im Theme-Editor noch die folgenden Zeilen ein, um die Formatierung der Tabelle abzuschließen:
table.b2b-table thead {
background: transparent;
color: inherit;
}
table.b2b-table .fancySearchRow th {
background: #481549;
border-color: #481549;
color: #fff;
padding: 10px !important;
}
table.b2b-table .fancySearchRow th input {
border: 0;
font-size: 16px;
padding: 2px 4px;
}
table.b2b-table th {
background: #481549;
color: #fff;
border-color: #fff;
}
table.b2b-table th:last-child {
border-right-color: #481549;
}
table.b2b-table th a {
color: #fff;
}
table.b2b-table tbody tr:first-child {
font-weight: bold;
font-size: 120%;
}
table.b2b-table th#b2b-d {
width: 130px;
}
Damit hast Du alle Schritte abgeschlossen und kannst ab sofort alle Links in Deinem eigenen Blog verwalten und bist nicht von einem externen Service abhängig, von dem Du nicht weißt, ob es ihn in zwei Jahren noch geben wird. Du behältst die volle Kontrolle über Deine Inhalte und diese bleiben auch in Deinem Besitz. Darüber hinaus kannst Du noch weitere Vorteile aus einem eigenen Link-Hub in WordPress ziehen, die weit über den Einsatzzweck als kostenlose Linktree-Alternative hinausgehen.
Fertig gestylt und mit JavaScript aufgepeppt: Alle Insta-Links auf einer eigenen Seite.
Tipps & Tricks
Du möchtest mehr aus der oben skizzierten Lösung herausholen? Dann solltest Du mit HTML, CSS, JavaScript und PHP zumindest ein wenig vertraut sein, denn hier verlässt Du den Copy & Paste Bereich und musst tiefer in die Materie einsteigen. Folgende Verbesserungen bzw. Veränderungen kannst Du mit einigen Handgriffen relativ schnell erzielen:
Thumbnails / Grafiken in der Tabelle
Du möchtest die Links mit einem Screenshot der Zielseite anreichern? Kein Problem: Pflege einfach das Bild bzw. die Grafik in der Detailseite Deines Insta-Links und ändere die Ausgabe für den Shortcode. Hier musst Du nun das zusätzliche Feld (das Thumbnail) ausgeben – zum Beispiel als weitere Spalte.
Kategorien / Schlagworte
Wenn Du nicht nur Instagram-Links als Linkseite ausgeben möchtest, sondern diesen Content-Typ für weitere Inhalte verwenden willst, dann empfehlen sich Kategorien oder Schlagworte (Tags). Dann musst Du lediglich die entsprechenden Kategorien / Tags filtern und den entsprechenden Code hierfür im Bereich des Shortcodes hinterlegen.
Tracking der URL
Du könntest auch ein Click-Tracking der URLs im Linkverzeichnis integrieren, beispielsweise mit Matomo oder Google Analytics und einem UTM-Trackingcode. Damit siehst Du dann, wie oft ein ausgehender Link angeklickt wurde.
Du merkst schon, dem Ausbau sind kaum Grenzen gesetzt. Lasse Dich von Linktree oder Flowpage inspirieren, um Deine kostenlose WordPress-Alternative weiter nach Deinen Bedürfnissen auszugestalten.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
2 Stimmen, Bewertung: 4,50 von 5)
Eine sehr gute Idee. Vielen Dank.