Open Graph for WooCommerce

Advanced Open Graph meta tags and social sharing for WooCommerce Boost social media engagement with automatic Schema.org markup and beautiful share buttons.

🚀 Overview

Open Graph for WooCommerce is a comprehensive WordPress plugin that helps your WooCommerce products look perfect when shared on social media. It automatically generates optimized Open Graph meta tags, Twitter Cards, and Schema.org structured data to boost your social media presence and SEO.

✨ What Makes It Special

🎯 WooCommerce-Focused: Built specifically for e-commerce with product pricing, availability, and inventory data
⚡ Performance Optimized: 70% smaller asset size, conditional loading, optimized queries
🎨 Beautiful UI: Modern WordPress-native admin interface with 3 share button styles
📱 Mobile First: Responsive design with touch-optimized social sharing
♿ Accessible: WCAG 2.1 compliant with full keyboard navigation and screen reader support
🔧 Developer Friendly: 20+ hooks, extensive customization options, and comprehensive API

🔥 Key Features

📱 Complete Social Media Support

Facebook - Complete Open Graph with App ID integration
Twitter - Optimized Cards with product data
LinkedIn - Professional network optimization
Pinterest - Rich Pins with product information
WhatsApp - Mobile-optimized sharing
Email - Traditional sharing with formatting
Copy Link - Modern clipboard API integration

🏗️ Advanced Schema.org Markup

Product schema with offers, reviews, and ratings
Organization and brand information
Breadcrumb navigation markup
Rich snippets for search engines

🎨 Beautiful Social Share Buttons

3 Stunning Styles: Modern, Classic, Minimal
Flexible Positioning: 4 built-in positions + shortcode
Smart Image Handling: Multiple sizes with fallbacks
Copy Functionality: Working clipboard integration

⚡ Performance Features

Conditional loading (only when needed)
Optimized database queries
Smart caching system
Minimal page load impact (< 0.1s)

🚀 Installation

WordPress.org (Recommended)

# From WordPress admin
Plugins → Add New → Search "Open Graph for WooCommerce" → Install → Activate

Manual Installation

# Download and extract
wp plugin install open-graph-for-woocommerce.zip
wp plugin activate open-graph-for-woocommerce

Composer

composer require wbcomdesigns/open-graph-for-woocommerce

⚙️ Quick Setup

Install & Activate the plugin
Navigate to WooCommerce → Social Media
Enable Platforms you want to support
Choose Style for share buttons
Configure Settings as needed
Test with social platform validators

🎯 Usage Examples

Basic Setup

// Plugin automatically generates meta tags for all products
// No code required - just configure in admin

Shortcode Usage

// Display share buttons anywhere
[wog_social_share]

// In templates
echo do_shortcode('[wog_social_share]');

Hook Examples

// Modify product meta data
add_filter('wog_product_meta_data', function($meta_data, $product) {
    $meta_data['custom_field'] = 'custom_value';
    return $meta_data;
}, 10, 2);

// Add custom platform
add_filter('wog_social_platforms', function($platforms) {
    $platforms['custom'] = array(
        'name' => 'Custom Platform',
        'url' => 'https://custom.com/share?url={{url}}'
    );
    return $platforms;
});

// Track share events
add_action('wog_social_share_tracked', function($platform, $product_id, $url) {
    // Your tracking logic here
});

🛠️ Development

Requirements

WordPress: 5.0+
WooCommerce: 4.0+
PHP: 7.4+ (8.0+ recommended)
Node.js: 14+ (for development)

Local Development Setup

# Clone repository
git clone https://github.com/wbcomdesigns/open-graph-for-woocommerce.git
cd woo-open-graph

# Install dependencies
npm install
composer install

# Start development
npm run dev

# Build for production
npm run build

File Structure

woo-open-graph/
├── 📄 woo-open-graph.php             # Main plugin file
├── 📁 includes/                     # Core functionality
│   ├── class-wog-settings.php      # Settings management
│   ├── class-wog-meta-tags.php     # Meta tags generation
│   ├── class-wog-schema.php        # Schema.org markup
│   ├── class-wog-sitemap.php       # XML sitemaps
│   ├── class-wog-social-share.php  # Social sharing
│   └── class-wog-meta-boxes.php    # Admin meta boxes
├── 📁 admin/                        # Admin interface
│   └── class-wog-admin.php         # Admin panel
├── 📁 assets/                       # Frontend assets
│   ├── css/                         # Stylesheets
│   └── js/                          # JavaScript
└── 📁 languages/                    # Translation files

📊 Performance Metrics

Metric	Before v2.0	After v2.0	Improvement
Asset Size	~105KB	~28KB	73% smaller
DB Queries	+8 avg	+3 avg	62% reduction
Load Time	+0.3s	+0.1s	67% faster
Memory Usage	~5MB	~2MB	60% less

🧪 Testing

Automated Testing

# Run PHP tests
composer test

# Run JavaScript tests  
npm test

# Run linting
npm run lint

Manual Testing Tools

Testing Checklist

Meta tags generate correctly on product pages
Share buttons appear in configured position
Copy link functionality works
Schema markup validates
Mobile responsiveness
Performance impact < 0.1s

🌐 Browser Support

Browser	Version	Status
Chrome	70+	✅ Fully Supported
Firefox	65+	✅ Fully Supported
Safari	12+	✅ Fully Supported
Edge	79+	✅ Fully Supported
iOS Safari	12+	✅ Fully Supported
Chrome Mobile	70+	✅ Fully Supported

🎨 Customization

CSS Customization

/* Override share button styles */
.wog-social-share .wog-share-btn {
    /* Your custom styles */
}

/* Style specific platforms */
.wog-share-facebook {
    background: #1877f2;
}

JavaScript Events

// Listen for share events
document.addEventListener('wog_social_share', function(event) {
    console.log('Shared on:', event.detail.platform);
});

// Custom copy functionality
window.EWOGSocialShare.copyLink(url);

🐛 Troubleshooting

Common Issues

Meta tags not showing?

Verify WooCommerce is active
Check on product pages only
Clear caching plugins

Share buttons not appearing?

Enable social sharing in settings
Check theme compatibility
Verify position setting

Copy button not working?

Requires HTTPS for modern browsers
Fallback provided for HTTP

Debug Mode

// Enable debug logging
define('WOG_DEBUG', true);

// Or via admin
WooCommerce → Social Media → Advanced → Debug Mode

📝 Contributing

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

Development Workflow

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Coding Standards

Follow WordPress Coding Standards
Use PHPStan for static analysis
Write tests for new functionality
Update documentation as needed

📖 Documentation

User Guide: Plugin Documentation
API Reference: Developer Documentation
Video Tutorials: YouTube Playlist
FAQ: Frequently Asked Questions

🆘 Support

Free Support

WordPress.org: Support Forum
GitHub: Issues & Bug Reports
Documentation: Knowledge Base

Premium Support

Priority Support: Contact Form
Custom Development: Services Page
Consultation: Book a Call

📄 License

This project is licensed under the GPL-2.0+ License - see the LICENSE file for details.

FilesExpand file tree

readme.md

Latest commit

History