Tracking a global "shares" for each post in our blog would be great. Here's what I'm trying to do.
- Working in Wordpress
- Using Jetpack/Sharedaddy social media counters
- Creating a Jquery listener to detect when a user click's on the share button
- Counting the number of shares already tallied across the main 3 social media channels we're utilizing , Facebook, Reddit and Twitterand saving to a custom meta field
I had this all working great using "AddThis" plugin, however I noticed that every new update to the plugin seems to bring with it security issues as well as loading of external tracking scripts (WTF!!??!?), making the implementation unusable. For the record, "urldefense.proofpoint.com" was the external domain loading with "AddThis" causing latency. For these reasons we flipped to Wordpress/ShareDaddy, which although not as slick looking, is much more stable and does not load a host of external tracking scripts.
The issue I'm facing with the ShareDaddy/Jetpack Share plugin is that each social media icon and counter are embedded in Iframes which load after the main page load, making it tricky to detect clicks and count html values. So the HTML rendered by the plugin alike so....
<li class="share-twitter">
<div class="twitter_button">
<iframe frameborder="0" style="width:101px; height:20px;" src="http://platform.twitter.com/widgets/tweet_button.html?url=#" scrolling="no" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" data-scribe="page:button">
<head>
<body class=" regular hcount ltr ready count-ready" data-scribe="section:share">
<div id="widget">
<div class="btn-o" data-scribe="component:button" style="width: 58px;">
<div id="c" class="count-o enabled" data-scribe="component:count">
<i></i>
<u></u>
<a id="count" href="https://twitter.com/search?ref_src=twsrc%5Etfw&q=#">0</a>
</div>
</div>
Starting with detecting a "click" on these social media icons using Twitter as an example... Cannot seem to reference with several attempts at calling with Jquery , alike so.....
jQuery(document).ready(function() {
// add listener to share this buttons
jQuery('div.twitter_button').click(function(){
alert("twitter");
return false;
});
jQuery('div.twitter_button').on( "click", function() {
alert("twitter");
return false;
});
jQuery('div.twitter_button #widget').click(function(){
alert("twitter");
return false;
});
jQuery('body').on('click','div.twitter_button',function(){
alert("twitter");
return false;
});
});
also tried it outside of the main Jquery (document).ready(function
jQuery('body').on('click','div.twitter_button',function(){
alert("twitter");
return false;
});
also tried tying to the loading of the iframe window itself
jQuery("div.twitter_button iframe").on("load", function () {
// do something once the iframe is loaded
jQuery('body').on('click','div.twitter_button',function(){
alert("twitter");
return false;
});
});
"return false;" is to try and prevent the plugin scripts interfering with the alert. Any assistance on how to "listen" to the social media buttons would be greatly appreciated. Thanks in advance for your feedback. S.
