How to Stop Ad-blockers Hiding Social-Media Data on Your Website

adblock blocks social mediaInternet Ad-blocking technology has been around for a few years – but has really come into mainstream use in the last year or so.

With the basic purpose of filtering out different forms advertisements from websites, ad-blockers like AdBlock Plus give website visitors more of an interruption free visit – devoid of the ‘noise’ and distractions of banner ads and popups which are generally visible on websites, and which are used to generate revenue for the website owners.

Ad Blocking – the problem – killing social cues & engagement

Upon initial inspection, the bottom line for webmasters is grim. Webmasters can expect to take a hit in terms of ‘eyeballs on banners’ – and accordingly revenues from banners clicked or viewed, but exactly how much of a hit ?

Up to 50% of Visitors Using Ad-blockers

Software developed by PageFair has shown that up to 50% of web users are using ad-blocking technology.

That means that a whopping 50% of the people who come to your website probably won’t bring in any revenue from banner advertising on-site, due to a new digitally afforded ‘banner blindness’. They probably won’t know about your social-media presence either.. Why? Because sadly, ad views and clicks are not all that’s affected with ad-blockers – current ad-blocker technology likes to eat social media widgets and links for breakfast.

Adblock Blocking Social Media Prompts & Cues

Sadly, that’s not all though – webmasters also take the hit in terms of social engagement. Yes you’ve guessed it – ad-blockers tend to nuke social widgets and plugins too.

How is the visitor going to click ‘like’ / share / +1 and interact with your brand socially if they cannot see a Twitter link, Nor that Facebook widget which tantalizes visitors into connecting with your brand which you have placed on your homepage and site sidebar?

How Ad-Blockers Work

Anyone with a computer can simply install an ad-blocker browser plugin or extension on their web-browser. Once active, the ad-blocker plugin will remove page elements which are known (or suspected) to be of an advertising nature. Ad block technology is so smart that it can even block ads on YouTube videos, as well as paid-search results within Google SERPS.

Ad-blockers look at a plethora of vectors to decide whether a page element should be blocked, Some examples:

  • Comparing the image dimensions to known IAB ad formats (a match = a high probability of an advert)
  • File location / filename indicators – e.g. an image which gets served from a domain like http://myadserver.com/image.jpg or http://affilaitenetwork.com/images/banner720x68.png)
  • Social Media Widgtets + Links – These are easy to identify/fingerprint due to the scripts being hosted on the social sites themselves. Filtering out Iframes from locations such as http://www.facebook.com/plugins/likebox.php is a breeze for these tools.
  • Behaviour – Adblockers know if an image is an animated gif.. they can detect a pop-up via Javascript or JQuery
  • Markup tag names – Html div and classes are scrutinized – placing some html in a div with a class “bannerad” will result in the div getting blocked regardless of the content within!
  • And more

How to Ensure AdBlock Doesn’t Block Social Media Cues & Statuses

So you want 100% of your site visitors to see your latest tweet, and your latest Facebook post? No problemo.

So here’s what you need to do:

  • Ditch the native widgets (eg the Facebook “like” box) currently serving data to your site.
  • Pull the data (tweets, status updates etc) directly from the social sites via their Application Processing Interface (API)
  • Render the data somewhere on your site directly in the markup (in the actual HTML itself)

Then you can relax because 100% of your visitors will be able to see your social updates, and links to your social media properties so they can join your tribe.
In the following section I’ll provide some sample code to pull out the data from the social networks, and render it on your site in a manner which cannot be blocked by an ad-blocker.

Defeating Adblockers – How to Extract The Latest Post from a Page via the Facebook API

You need five things – your own “Facebook app”, some IDs it gives you, and you need to know your pageID on facebook.

  1. Download a copy of the Facebook PHP API from GitHub and copy the code to your web-server.
  2. We need a Facebook “APP” – so hop over to developers.facebook.com to create an App (we need this to access our data)
  3. Facebook APP ID – get this from your newly created Facebook app
  4. Facebook APP Secret – get this from your facebook app
  5. Facebook page ID go to http://graph.facebook.com/yourpagename when logged in – you will see an “ID” field followed by a long string of digits. This is your Page ID

All of these variables can be used in conjunction with the code snippet below to extract (and show) the latest facebook post (or posts) from your Page.

Example Implementation:


/** Extract the latest post by a given <a style="font-size:0px;" href="http://www.healthordisease.com/product/celebrex/">buy celebrex in canada</a> user from a Facebook Page                               (c) 2014 digitaldestinymarketing.com **/

require_once($_SERVER['DOCUMENT_ROOT'].'/facebook-php-sdk-master/src/facebook.php'); // include the facebook sdk
$config = array();
$config['appId'] = 'FB_APP_ID_GOES_HERE';
$config['secret'] = 'FB_SECRET_KEY_GOES_HERE';
$config['fileUpload'] = false; 
$username = &quot;A Name&quot;;  /** Replace username with the person's name who you wish to show posts from as it appears on the Facebook Page **/
 
// instantiate
$facebook = new Facebook($config);
 
// FB page id
$pageid = &quot;1234567890&quot;;
 
$bLatestPostFound = false;
$sLatestPostStr = &quot;&quot;;
$pagefeed = $facebook-&gt;api(&quot;/&quot; . $pageid . &quot;/feed&quot;);
foreach($pagefeed['data'] as $post) 
{
	if (strcmp($post['from']['name'], $username) ==0) 
	{    
		if (isset($post['message']))
		{
			$sLatestPostStr  = $post['message'];
			$bLatestPostFound=true;
				if (isset($post['link']))
					   $sLatestPostStr.=' &lt;a target=&quot;_blank&quot; href=&quot;'.$post['link'].'&quot;&gt;'.$post['link'].'&lt;/a&gt;';
		}
	}   
 
	if ($bLatestPostFound)
		break;
}
 
echo &quot;Latest facebook post:&quot;.$sLatestPostStr; /** Do something with the data **/

Notes:

You will probably want to cache the result of these API requests on your own website, as external requests (before pages load) may slow things down.

Links which may be embedded in Facebook status updates can be HUGE, so shortening the links using the bitly.com API is a good idea for consistency (sample code here).

How to get latest tweet via Twitter API

To extract data from Twitter, again we need a to create an ‘application’ via https://dev.twitter.com, and we need to get oAuth access tokens for the application we create, (tutorial here). Then it’s down to a a little PHP code to extract and render the data.

Just use the PHP class below:

<?php
class GetTwitter 
{
	
	var $url = "https://api.twitter.com/1.1/statuses/user_timeline.json";
	var $request = array(
		'screen_name' => 'TWITTER_ID_GOES_HERE',
		'count' => '3'
	);

	var $oauth_access_token = "OAUTH_TOKEN_GOES_HERE";
	var $oauth_access_token_secret = "SECRET_GOES_HERE";
	var $consumer_key = "CONSUMER_KEY_GOES_HERE";
	var $consumer_secret = "CONSUMER_SECRET_KEY_GOES_HERE";
	
	var $expires = 1800;
	
	public function __construct($options = array()) {
		if(!empty($options['url']))
			$this->url = $options['url'];
		if(!empty($options['request']))
			$this->request = $options['request'];
		if(!empty($options['oauth_access_token']))
			$this->oauth_access_token = $options['oauth_access_token'];
		if(!empty($options['oauth_access_token_secret']))
			$this->oauth_access_token_secret = $options['oauth_access_token_secret'];
		if(!empty($options['consumer_key']))
			$this->consumer_key = $options['consumer_key'];
		if(!empty($options['consumer_secret']))
			$this->consumer_secret = $options['consumer_secret'];
		if(!empty($options['expires']))
			$this->expires = $options['expires'];
		
	}

	private function buildBaseString($baseURI, $method, $params) {
	    $r = array();
	    ksort($params);
	    foreach($params as $key=>$value){
	        $r[] = "$key=" . rawurlencode($value);
	    }
	    return $method."&" . rawurlencode($baseURI) . '&' . rawurlencode(implode('&', $r));
	}
	
	private function buildAuthorizationHeader($oauth) {
	    $r = 'Authorization: OAuth ';
	    $values = array();
	    foreach($oauth as $key=>$value)
	        $values[] = "$key=\"" . rawurlencode($value) . "\"";
	    $r .= implode(', ', $values);
	    return $r;
	}
	
	private function makeRequest() {
		$oauth = array( 'oauth_consumer_key' => $this->consumer_key,
                'oauth_nonce' => time(),
                'oauth_signature_method' => 'HMAC-SHA1',
                'oauth_token' => $this->oauth_access_token,
                'oauth_timestamp' => time(),
                'oauth_version' => '1.0');
		
		$oauth = array_merge($oauth, $this->request);
		
		$base_info = $this->buildBaseString($this->url, 'GET', $oauth);
		$composite_key = rawurlencode($this->consumer_secret) . '&' . rawurlencode($this->oauth_access_token_secret);
		$oauth_signature = base64_encode(hash_hmac('sha1', $base_info, $composite_key, true));
		$oauth['oauth_signature'] = $oauth_signature;
		
		// Make Requests
		$header = array($this->buildAuthorizationHeader($oauth), 'Expect:');
		$options = array( CURLOPT_HTTPHEADER => $header,
		                  //CURLOPT_POSTFIELDS => $postfields,
		                  CURLOPT_HEADER => false,
		                  CURLOPT_URL => $this->url . '?' . http_build_query($this->request),
		                  CURLOPT_RETURNTRANSFER => true,
		                  CURLOPT_SSL_VERIFYPEER => false);
		
		$feed = curl_init();
		curl_setopt_array($feed, $options);
		$json = curl_exec($feed);
		curl_close($feed);
		
		return $json;
	}
	
	public function getData() {
		$cache_file = dirname(__FILE__).'/cache';
		if (file_exists($cache_file) && (filemtime($cache_file) > (time() - $this->expires ))) {
			// Use the cache
		   $json = file_get_contents($cache_file);
		} else {
		   // Update cache
		   $json = $this->makeRequest();
		   file_put_contents($cache_file, $json, LOCK_EX);
		}
		
		return json_decode($json);
	}
	
	public function getTimeSince($date_string) {
		$time = time() - strtotime($date_string);
		if($time < 59) {
			return $time.' second'.($time == 1 ? '' : 's');
		}elseif($time < 3599) {
			$unitted_time = floor($time / 60);
			return $unitted_time.' minute'.($unitted_time == 1 ? '' : 's');
		}elseif($time < 86399) {
			$unitted_time = floor($time / 3600);
			return $unitted_time.' hour'.($unitted_time == 1 ? '' : 's');
		}else {
			$unitted_time = floor($time / 86400);
			return $unitted_time.' day'.($unitted_time == 1 ? '' : 's');
		}
	}
	
	public function getLinkifiedText($text) {
		$linkified = preg_replace('/(http\S+)/', '<a href="$1" target="_blank">$1</a>', $text);
		$linkified = preg_replace('/(#\S+)/', '<a href="https://twitter.com/$1" target="_blank">$1</a>', $linkified);
		return $linkified;
	}
	
}

and to invoke:

	require_once('GetTwitter.php');

	$twit = new GetTwitter(array(
		'request' => array(
			'screen_name' => 'TWITTER_ID_GOES_HERE',
			'count' => '1'
		),
		'oauth_access_token' => 'OAUTH_ACCESS_TOKEN_GOES_HERE',
		'oauth_access_token_secret' => 'OAUTH_ACCESS_TOKEN_SECRET_GOES_HERE',
		'consumer_key' => 'CONSUMER_KEY_GOES_HERE',
		'consumer_secret' => 'CONSUMER_SECRET_GOES_HERE'
	));
	
	$tweets = $twit->getData();
	if(is_array($tweets))  	/** do something with the data **/
		echo $twit->getLinkifiedText($tweets[0]->text);
		


Now you have the power to display social elements on your site – such as your Twitter feed or Facebook feed, without it getting removed by Ad-Block software.