Telkari – WordPress Floating Social Media Links and CTA Buttons Plugin

Telkari is a theme-independent WordPress plugin for displaying floating social media links and CTA buttons on your site. You can show social icons, CTA buttons, or both, then control their layout, placement, colors, and mobile behavior from a dedicated admin page.

Version: 1.0.0
Requires WordPress: 5.9+
Tested up to: 6.9
Requires PHP: 7.4+
License: GPLv2 or later

What’s New in 1.0.0

Telkari 1.0.0 expands the plugin from a social media links manager into a more complete floating action system. The new version adds CTA buttons, independent display group visibility, separate CTA placement controls, refreshed admin screens, and improved mobile layouts across all frontend designs.

Key highlights:

  • Social Icons and CTA Buttons can now be shown or hidden independently.
  • CTA buttons support WhatsApp, phone, email, and custom URL destinations.
  • Social Icons and CTA Buttons can use separate placements.
  • Ribbon and Pillar layouts prevent social and CTA groups from overlapping when both groups are visible.
  • Mobile layouts are more compact and keep CTA labels on one line with controlled truncation.
  • The Design, Social Accounts, CTA Buttons, and Appearance tabs were refreshed for a more consistent admin experience.

Features

Display Groups

Telkari includes separate display controls for Social Icons and CTA Buttons. This makes it possible to use the plugin in three main scenarios:

  • Social icons only
  • CTA buttons only
  • Social icons and CTA buttons together

Each group can be managed independently from the Design tab. When both groups are visible, Telkari normalizes conflicting placements so the frontend layout stays readable and does not overlap.

Design Layouts

Three built-in design templates are included, each with its own placement behavior:

  • Orbit – Corner trigger button with social icons opening in a quarter-circle arc. CTA buttons can be displayed with the same design without changing the Orbit toggle behavior.
  • Ribbon – Bottom horizontal layout. Social icons stay in a single row, and only one display group can use the center placement at a time.
  • Pillar – Side layout. When both groups are visible, Social Icons and CTA Buttons are kept on opposite sides.

Position System

Each design supports a specific set of positions:

DesignAvailable Positions
OrbitBottom Left, Bottom Right
RibbonBottom Left, Bottom Right, Bottom Center
PillarBottom Left, Bottom Right

The placement controls update dynamically based on the selected design and enabled display groups.

Supported Platforms

Telkari includes bundled Font Awesome SVG icons for 13 platforms, with no CDN dependency:

Instagram, YouTube, Facebook, X (Twitter), LinkedIn, TikTok, GitHub, Pinterest, Telegram, WhatsApp, Discord, Twitch, Spotify

Social Account Management

  • Add and delete social media accounts from the admin panel
  • Drag-and-drop reordering via SortableJS
  • Per-account enable/disable toggle
  • URL validation on account creation
  • Per-platform color customization with the WordPress color picker

CTA Button Management

CTA buttons support:

  • WhatsApp number and optional message
  • Phone number
  • Email address
  • Custom URL
  • Custom label
  • Per-button color
  • Drag-and-drop ordering
  • Enable/disable toggle
  • Live preview while creating or editing buttons

Appearance Settings

The Appearance tab includes separate settings for Social Icons and CTA Buttons:

  • Social icon size and spacing
  • CTA button size, spacing, and width
  • Icon style: Rounded or Square
  • Link target: Same Tab or New Tab
  • Tooltips
  • Platform colors
  • CTA button colors
  • Wrapper background color for Ribbon and Pillar
  • Orbit trigger button color

Color Customization

  • Per-platform brand color overrides with WordPress color picker
  • 13 official brand colors included as defaults
  • Configurable bar/wrapper background color for Ribbon and Pillar, with transparent option
  • Configurable trigger button color for Orbit design
  • Per-button CTA color controls
  • Auto-contrast foreground color calculation
  • One-click “Reset All Colors” option
  • CSS custom properties for per-item frontend theming

Responsive Mobile Behavior

Telkari 1.0.0 improves the mobile frontend experience for all three designs:

  • Social icons and CTA buttons use more compact sizing on smaller screens.
  • CTA labels stay visible but are limited to a single line.
  • Long CTA labels are shortened with controlled truncation.
  • Ribbon social icons remain in one row to preserve the design.
  • Ribbon and Pillar avoid same-side collisions when both Social Icons and CTA Buttons are active.

Admin Interface

The Telkari settings panel is available from the top-level Telkari menu in WordPress admin.

Tabs:

  • Design – Visual design selector with SVG previews, Display Groups, and relationship-aware placement controls.
  • Social Accounts – Account list with drag-and-drop sorting, status messaging, enable/disable controls, and add form.
  • CTA Buttons – CTA list, guided builder, color picker, sorting, status messaging, and live preview.
  • Appearance – Card-based settings for Social Icons, CTA Buttons, link behavior, tooltips, and color customization.

A settings link is also available on the Plugins list page.

Technical Details

Frontend Rendering

  • Social icons and CTA buttons are rendered via the wp_footer hook.
  • Layouts are CSS-first and theme-independent.
  • Design-specific CSS is loaded per active design: design-1.css, design-2.css, and design-3.css.
  • Shared frontend CSS is loaded only when at least one visible, enabled Social Icon or CTA Button exists.
  • The Orbit toggle script is loaded only when the Orbit social trigger is rendered.
  • CSS custom properties are used for icon size, spacing, CTA spacing, colors, and wrapper background.

File Structure

telkari/
  telkari.php                          Main plugin file
  uninstall.php                        Clean uninstall handler
  includes/
    core/
      cta-buttons.php                  CTA data model and sanitization helpers
      options.php                      Settings defaults, getters, platform definitions
      item-helpers.php                 Shared collection and link helper functions
      sanitization.php                 Input sanitization callbacks
    admin/
      settings-page.php                Admin page registration and tab rendering
      cta-list-table.php               CTA buttons list UI
      design-selector.php              Design cards and SVG previews
      social-list-table.php            Social accounts list UI
    frontend/
      render-icons.php                 Frontend icon rendering and contrast calculation
  assets/
    css/
      admin.css                        Admin panel styles
      frontend-shared.css              Shared frontend social and CTA styles
      design-1.css                     Orbit design styles
      design-2.css                     Ribbon design styles
      design-3.css                     Pillar design styles
    js/
      admin.js                         Admin interactions
      sortable.min.js                  SortableJS library
    icons/
      *.svg                            Bundled SVG icons and plugin logo
  languages/
    telkari.pot                        Translation template
    telkari-*.po / telkari-*.mo        Bundled translation files

Security

  • Nonce verification on all form submissions
  • Capability checks with manage_options
  • Input sanitization through dedicated callbacks
  • Output escaping on rendered content
  • SVG icon whitelist for bundled icons
  • Clean uninstall support for single site and multisite installations

Privacy and External Resources

Telkari does not track users and does not call external APIs. No frontend assets are loaded from a CDN.

Site owners may configure social and CTA links that point to external destinations, but Telkari does not transmit site data to those destinations.

SortableJS is bundled for admin drag-and-drop sorting under the MIT license. Source: https://github.com/SortableJS/Sortable

Internationalization

  • Full i18n support with the telkari text domain
  • 11 bundled translation files
  • All admin UI strings are translatable

Bundled translations:

Arabic, Bengali, Chinese Simplified, French, German, Hindi, Italian, Portuguese, Russian, Spanish, Turkish

Requirements

  • WordPress 5.9 or later
  • PHP 7.4 or later
  • No external network dependencies

Installation

To install the plugin, visit the WordPress plugin directory or the GitHub project page.

WordPress plugin directory: https://wordpress.org/plugins/telkari/
GitHub: https://github.com/tercan/telkari
Documentation and demo: https://tercan.github.io/telkari/