Song Voter Widget: The Complete Guide to Adding Interactive Audio Voting to Your WordPress Site
> go to installation & download
Are you looking to add interactive audio voting functionality to your WordPress website? Whether you’re running a music blog, podcast directory, or audio showcase, the Song Voter Widget plugin offers an elegant solution that lets your visitors vote on MP3 files with thumbs up and thumbs down buttons.
In this comprehensive guide, we’ll walk you through everything you need to know about Song Voter Widget – from installation and setup to advanced customization techniques.
What is Song Voter Widget?
Song Voter Widget is a free WordPress plugin that creates beautiful, interactive audio players with built-in voting functionality. It allows your website visitors (including guests who aren’t logged in) to listen to MP3 files and vote on them using intuitive thumbs up and thumbs down buttons.
The plugin features a stunning metallic design with smooth animations, real-time vote counting, and works seamlessly across all devices. Best of all, it’s incredibly easy to use and requires no coding knowledge whatsoever.
Example
Key Features at a Glance
– Three Integration Methods: Works with Gutenberg blocks, shortcodes, and Elementor
– No Login Required: Guest voting enabled by default
– Beautiful Design: Modern metallic interface with smooth animations
– Vote Tracking: Cookie-based system allows users to change their votes
– Real-Time Updates: Vote counts update instantly
– Fully Responsive: Perfect appearance on desktop, tablet, and mobile
– Customizable: Adjust colors, width, and display options
– Lightweight: Only ~13KB total assets for fast loading
– No Elementor Required*: Works standalone (but supports Elementor if you use it)
For Music Bloggers and Reviewers
If you run a music blog or review site, Song Voter Widget lets your audience express their opinions on tracks, albums, or artists. The voting data can help you understand which content resonates most with your readers.
For Podcast Directories
Create a podcast directory where listeners can vote on their favorite episodes. The voting system helps surface the most popular content and encourages community engagement.
For Audio Portfolios
Musicians, producers, and sound designers can showcase their work and get immediate feedback from potential clients or fans. The professional design adds credibility to your portfolio.
For Entertainment Websites
Radio stations, DJ sites, and entertainment platforms can use Song Voter Widget to run “Song of the Day” contests or let visitors vote on playlist requests.
Installation Guide
Getting started with Song Voter Widget is incredibly simple. Here’s the complete installation process:
Step 1: Download the Plugin
First, download the Song Voter Widget plugin zip file from the here.
Step 2: Upload to WordPress
1. Log in to your WordPress admin dashboard
2. Navigate to Plugins → Add New
3. Click the Upload Plugin button at the top
4. Click Choose File and select the `song-voter-widget.zip` file
5. Click Install Now
6. Once installed, click Activate Plugin
That’s it! The plugin is now active and ready to use. You’ll notice there are no complex settings pages or configuration needed – it works right out of the box.
System Requirements
– WordPress 5.0 or higher
– PHP 7.2 or higher
– HTML5-compatible browser for audio playback
– Elementor (optional – only needed if you want to use the Elementor widget)
How to Use Song Voter Widget
Song Voter Widget offers three different ways to add audio players to your site. Choose the method that works best for your workflow:
Method 1: Using the Gutenberg Block (Recommended)
The Gutenberg block method is perfect for WordPress users who work with the block editor. Here’s how to use it:
1. Edit Your Post or Page Open any post or page in the WordPress editor
2. Add the Block Click the ‘+’ button and search for “Song Voter”
3. Select the Block Click on the “Song Voter” block to add it
4. Choose Your Audio File Click “Select Audio File” button
5. Upload or Select Either upload a new MP3 or select from your media library
6. Customize (Optional) Use the sidebar settings to:
– Toggle the filename display on/off
– Set a custom width (e.g., “500px” or “80%”)
7. Publish Click publish to make your audio player live
The Gutenberg block provides a visual interface that makes it incredibly easy to add and customize your audio players without touching any code.
Method 2: Using Shortcodes
Shortcodes are perfect for users who prefer the classic editor, want to add players to widgets, or need maximum flexibility. Here’s the complete shortcode guide:
Basic Shortcode Syntax
[song_voter id="123"]Simply replace `123` with your audio file’s media ID.
Finding Your Media ID
To find the media ID of your audio file:
1. Go to Media → Library in your WordPress admin
2. Click on your MP3 file to open the details
3. Look at the URL in your browser’s address bar
4. Find the number after `post=`
– Example: `post.php?post=456&action=edit`
– Your media ID is `456`
Advanced Shortcode Options
The shortcode accepts several optional parameters:
Hide the Filename:
[song_voter id="123" show_filename="false"]Set Custom Width:
[song_voter id="123" width="600px"]Combine Multiple Options:
[song_voter id="123" show_filename="false" width="80%"]Where to Use Shortcodes
Shortcodes work almost anywhere in WordPress:
– Posts and Pages : Paste directly in the content
– Text Widgets: Add to any widget area
– Custom HTML Blocks: Use within Gutenberg
– Page Builders: Most page builders support shortcodes
– Theme Files: Use with `do_shortcode()` function
#### Multiple Players Example
You can easily add multiple audio players to the same page:
[song_voter id="101"]
[song_voter id="102"]
[song_voter id="103"]Each player maintains its own independent voting data.
Method 3: Using Elementor Widget
If you’re an Elementor user, Song Voter Widget integrates seamlessly with your workflow:
1. Edit with Elementor: Open your page in Elementor
2. Search for Widget: In the left panel, search for “Song Voter”
3. Drag and Drop: Drag the widget to your desired location
4. Select Audio: Click “Choose Audio File” in the left panel
5. Configure Settings:
– Content Tab: Choose file and toggle filename
– Style Tab: Adjust width and accent color
6. Preview: See live changes as you edit
7. Publish: Update your page when ready
The Elementor widget provides the most visual customization options, with live preview and style controls built into the Elementor interface.
Understanding the Voting System
The voting system in Song Voter Widget is designed to be simple, fair, and user-friendly. Here’s how it works:
How Voting Works
1. Anyone Can Vote: No login required – even guests can vote
2. One Vote Per Person: Tracked via browser cookies
3. Change Your Mind: Users can switch from thumbs up to thumbs down
4. Remove Your Vote: Click the same button again to remove your vote
5. Instant Feedback: Vote counts update immediately
6. Visual Confirmation: Voted buttons are highlighted in blue
Vote Tracking Technical Details
Votes are stored in two places:
Database: A custom table stores the total vote counts for each audio file
– Table name: `wp_song_votes`
– Stores: media_id, thumbs_up count, thumbs_down count
– Updates in real-time when votes are cast
Browser Cookies: Individual vote preferences are stored in cookies
– Cookie name: `svw_vote_{media_id}`
– Expires: 1 year from voting
– Purpose: Prevents duplicate voting and remembers user choices
Vote Security
The plugin includes several security measures:
– Nonce Verification: All vote submissions are verified with WordPress nonces
– Data Sanitization: All inputs are sanitized and validated
– SQL Injection Prevention: Uses prepared statements for all database queries
– Rate Limiting: Maximum 1 vote per second per IP address
– XSS Protection: All outputs are properly escaped
Vote Persistence
Votes persist across sessions and browser restarts. If a user:
– Closes their browser → Their vote remains
– Returns tomorrow → Their vote is still recorded
– Clears cookies → Can vote again (fresh slate)
Advanced CSS Customization
For developers or advanced users, you can add custom CSS to further style the player. Add these to your theme’s custom CSS area:
Change Background Gradient
.svw-player-main {
background: linear-gradient(145deg, #your-color-1, #your-color-2) !important;
}Modify Button Colors
.svw-play-button:hover {
background: linear-gradient(145deg, #ff6b6b, #ee5a52) !important;
}Adjust Title Styling
.svw-title-text {
font-size: 18px !important;
color: #your-color !important;
font-weight: 700 !important;
}Customize Vote Button Appearance
.svw-vote-button.voted {
background: linear-gradient(145deg, #51cf66, #40c057) !important;
color: white !important;
}Change Progress Bar Color
.svw-progress-bar {
background: linear-gradient(90deg, #ff6b6b, #ee5a52) !important;
}Responsive Design
Song Voter Widget is fully responsive and automatically adapts to different screen sizes. Here’s how it behaves:
Desktop (>768px)
– Horizontal layout with all elements in one row
– Play button, progress bar, and voting buttons side by side
– Full-width song title at top
– Optimal spacing for mouse interactions
Tablet (768px and below)
– Elements reorganize into logical groups
– Play button remains prominent
– Progress bar takes full width
– Voting buttons centered below
– Touch-friendly button sizes
Mobile (480px and below)
– Fully stacked vertical layout
– Larger touch targets for buttons
– Compact but readable text
– Progress bar easily draggable
– Vote buttons optimized for thumb reach
Accessibility Features
The plugin includes several accessibility enhancements:
– Keyboard Navigation All buttons are keyboard accessible
– ARIA Labels Proper labels for screen readers
– Focus Indicators Clear visual focus states
– High Contrast Support Works in high contrast mode
– Semantic HTML Proper heading structure and landmarks
Optimization Tips
For Maximum Performance:
1. Optimize Audio Files: Use 128kbps MP3 for web (good quality, smaller size)
2. Use CDN: Host audio files on a CDN for faster delivery
3. Lazy Load: If you have many players, consider lazy loading
4. Limit Per Page: For best UX, use 5-10 players max per page
Exclude from Optimization:
If using asset optimization plugins, exclude these files:
song-voter-widget/assets/js/script.js
song-voter-widget/assets/css/style.cssSEO Considerations
Using Song Voter Widget effectively can actually benefit your SEO:
Audio Content and SEO
Transcriptions: Consider adding text transcriptions of audio content near the player for better SEO.
Schema Markup: Add AudioObject schema for rich results:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "AudioObject",
"name": "Song Title",
"description": "Description of the audio",
"contentUrl": "URL to MP3 file",
"encodingFormat": "audio/mpeg"
}
</script>Privacy and GDPR Compliance
Song Voter Widget is designed with privacy in mind:
Data Collection
What is Collected:
– Vote counts (stored in database)
– User vote preference (stored in browser cookie)
– IP address (temporarily, for rate limiting)
What is NOT Collected:
– Personal information
– Email addresses
– User accounts
– Tracking across sites
Cookie Information
Cookie Name: `svw_vote_{media_id}`
Purpose: Remember user’s vote preference
Duration: 1 year
Type: Functional (necessary for voting to work)
GDPR Compliance
To be GDPR compliant with Song Voter Widget:
1. **Cookie Notice**: Add to your cookie policy:
"Song voting functionality uses functional cookies to
remember your vote preferences. These cookies are
necessary for the voting feature to work and expire
after 1 year."2. **Privacy Policy**: Add to your privacy policy:
"When you vote on audio content, we store your vote
preference in a browser cookie. No personal data is
collected or stored on our servers."3. **User Rights**: Users can:
– Clear cookies to remove vote data
– Vote anonymously without registration
– Change or remove votes at any time
Advanced Integration
Displaying Vote Counts in Other Widgets
You can access vote data programmatically:
<?php
// Get vote counts for a specific media ID
$db = SVW_Database::get_instance();
$votes = $db->get_votes(123); // Replace 123 with media ID
echo "Thumbs Up: " . $votes['thumbs_up'];
echo "Thumbs Down: " . $votes['thumbs_down'];
?>Creating Custom Leaderboards
Build a “Most Voted” page:
<?php
global $wpdb;
$table = $wpdb->prefix . 'song_votes';
// Get top 10 most voted tracks
$top_tracks = $wpdb->get_results(
"SELECT media_id, (thumbs_up - thumbs_down) as score
FROM {$table}
ORDER BY score DESC
LIMIT 10"
);
foreach ($top_tracks as $track) {
// Display each track with Song Voter widget
echo do_shortcode('[song_voter id="' . $track->media_id . '"]');
}
?>AJAX Vote Updates
For advanced developers, votes trigger custom JavaScript events:
jQuery(document).on('svw_vote_complete', function(e, data) {
console.log('Vote recorded:', data);
// data contains: thumbs_up, thumbs_down, media_id
// Your custom code here
// Example: Track with Google Analytics
ga('send', 'event', 'Song Vote', 'Vote Cast', data.media_id);
});Custom Vote Notification
Show custom notifications after voting:
jQuery(document).on('svw_vote_complete', function(e, data) {
// Show a thank you message
alert('Thanks for voting! Current score: ' +
(data.thumbs_up - data.thumbs_down));
});Conclusion
Song Voter Widget is the perfect solution for adding interactive audio voting to your WordPress site. Whether you’re running a music blog, podcast directory, or audio portfolio, this plugin offers the ease-of-use you need.
With three integration methods (Gutenberg blocks, shortcodes, and Elementor), the plugin fits seamlessly into any WordPress workflow. The beautiful metallic design, real-time voting, and responsive layout ensure your audio content looks professional on every device.
Best of all, Song Voter Widget requires no coding knowledge, works without Elementor (though it supports it), and is completely free to use.
