Social Header AI - WordPress Plugin

Transform your social media posts into stunning website headers with AI-powered intelligent conversion.

🚀 Features

Multi-Platform Support: Connect Instagram, Twitter/X, or Telegram channels
AI-Enhanced Conversion: Intelligent post-to-header transformation using multiple AI providers
Elementor Compatible: Drag-and-drop widget for Elementor page builder
Customizable Design: Full control over aspect ratios, text positioning, and animations
Advanced Slider: Professional slideshow with autoplay, navigation, and responsive design
Security First: Encrypted API key storage and comprehensive security measures
Performance Optimized: Lazy loading, caching, and intersection observers
Accessibility Ready: WCAG compliant with keyboard navigation and screen reader support

📋 Requirements

WordPress 5.0 or higher
PHP 7.4 or higher
MySQL 5.6 or higher
SSL certificate (recommended for API security)

🔧 Installation

Download the Plugin

git clone https://github.com/functionland/social-header-ai.git
cd social-header-ai

Upload to WordPress
- Upload the plugin folder to /wp-content/plugins/
- Or install via WordPress admin: Plugins → Add New → Upload Plugin
Activate
- Go to WordPress Admin → Plugins
- Find "Social Header AI" and click "Activate"
Configure
- Navigate to Settings → Social Header AI
- Follow the setup wizard

⚙️ Configuration

1. Social Media Platform Setup

Instagram

Create a Facebook Developer account
Set up Instagram Basic Display API
Get your access token
Enter your Instagram username and access token

Twitter/X

Apply for Twitter Developer account
Create a new app in Twitter Developer Portal
Generate Bearer Token
Enter your Twitter username and Bearer Token

Telegram

Create a bot using @BotFather
Get your bot token
Add the bot to your channel as admin
Enter your channel username and bot token

2. AI Provider Configuration

Choose from multiple AI providers:

OpenAI (Recommended)

Models: GPT-3.5 Turbo, GPT-4, GPT-4 Turbo
Free Tier: No (Pay-per-use)
Setup: Get API key from OpenAI Platform

Google Gemini (Free Option)

Models: Gemini Pro, Gemini Pro Vision
Free Tier: Yes (with limits)
Setup: Get API key from Google AI Studio

Anthropic Claude

Models: Claude 3 Haiku, Sonnet, Opus
Free Tier: No (Pay-per-use)
Setup: Get API key from Anthropic Console

Cohere (Free Option)

Models: Command, Command Light
Free Tier: Yes (with limits)
Setup: Get API key from Cohere Dashboard

3. Header Design Settings

Aspect Ratio: 16:9, 21:9, 4:3, 3:2, 1:1, Auto, Original
Layout: Full width, viewport height, custom dimensions
Text: Position, overlay, animations, typography
Slider: Autoplay, timing, navigation controls, transitions

📖 Usage

Shortcode

[social_header_ai]

Shortcode Parameters

[social_header_ai 
    posts_limit="5" 
    style="slider" 
    class="custom-class" 
    id="custom-id"
]

Elementor Widget

Edit page with Elementor
Search for "Social Header AI" in widget panel
Drag widget to desired location
Configure settings in widget panel

PHP Template

<?php
if (function_exists('social_header_ai_render')) {
    echo social_header_ai_render(array(
        'posts_limit' => 5,
        'style' => 'slider'
    ));
}
?>

🎨 Customization

CSS Customization

/* Custom header styles */
.social-header-ai {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Custom text styles */
.header-headline {
    font-family: 'Your Custom Font', sans-serif;
    text-transform: uppercase;
}

/* Custom slider controls */
.slider-controls button {
    background: your-brand-color;
    border-radius: 0;
}

Hooks and Filters

// Modify AI processing prompt
add_filter('social_header_ai_prompt', function($prompt, $post_data) {
    return $prompt . "\nAdditional instructions...";
}, 10, 2);

// Customize header settings
add_filter('social_header_ai_widget_settings', function($settings) {
    $settings['custom_option'] = 'value';
    return $settings;
});

// Modify fetched posts
add_filter('social_header_ai_posts', function($posts) {
    // Filter or modify posts
    return $posts;
});

🔒 Security Features

Encrypted API Storage: All API keys encrypted with WordPress salts
Rate Limiting: Prevents API abuse and quota exhaustion
Input Sanitization: All user inputs properly sanitized
Nonce Protection: CSRF protection on all forms
Capability Checks: Proper user permission validation
Security Headers: XSS and clickjacking protection

🚀 Performance

Caching: Intelligent caching of API responses and AI results
Lazy Loading: Images load only when needed
Intersection Observers: Performance-optimized visibility detection
Minified Assets: Optimized CSS and JavaScript
Database Optimization: Efficient queries and indexing

🌐 Accessibility

WCAG 2.1 AA Compliant: Meets accessibility standards
Keyboard Navigation: Full keyboard support
Screen Reader Support: Proper ARIA labels and roles
High Contrast: Support for high contrast mode
Reduced Motion: Respects user motion preferences

🐛 Troubleshooting

Common Issues

Posts Not Fetching

Verify API keys are correct
Check username/channel spelling
Ensure account has recent posts with media
Check rate limits

AI Processing Fails

Verify AI provider API key
Check API quota/credits
Ensure stable internet connection
Try different AI model

Headers Not Displaying

Check shortcode placement
Verify plugin activation
Clear caching plugins
Check theme compatibility

Debug Mode

Enable WordPress debug mode for detailed error logs:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

📊 API Limits

Provider	Free Tier	Rate Limits	Notes
Instagram	No	200 requests/hour	Requires app review for production
Twitter	No	300 requests/15min	Essential access tier
Telegram	Yes	30 requests/second	No limits for bots
OpenAI	$5 credit	Varies by model	Pay-per-use
Google Gemini	Yes	60 requests/minute	Free tier available
Anthropic	$5 credit	Varies by model	Pay-per-use
Cohere	Yes	100 requests/month	Free tier available

🔄 Updates

The plugin includes automatic update notifications. To manually check for updates:

Go to WordPress Admin → Plugins
Look for update notifications
Click "Update Now" when available

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Setup

git clone https://github.com/yourusername/social-header-ai.git
cd social-header-ai
npm install
composer install

Running Tests

npm run test
composer test

📄 License

This project is licensed under the GPL v2 or later - see the LICENSE file for details.

🆘 Support

Documentation: Plugin Documentation
Support Forum: WordPress.org Support
Bug Reports: GitHub Issues
Feature Requests: GitHub Discussions

🙏 Credits

AI Providers: OpenAI, Google, Anthropic, Cohere
Social APIs: Instagram, Twitter, Telegram
Icons: Platform icons from respective brands
Testing: WordPress community feedback

📈 Roadmap

Additional social platforms (LinkedIn, TikTok, YouTube)
Advanced AI customization options
Template marketplace
Multi-language support
Analytics integration
White-label options

Made with ❤️ for the WordPress community

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
admin		admin
assets		assets
elementor		elementor
includes		includes
README.md		README.md
social-header-ai.php		social-header-ai.php

functionland/social-header-ai

Folders and files

Latest commit

History

Repository files navigation