Moved to SSL, lost my social sharing button counts, now need to use the old http url to get them back - ssl

I just switched my site over to SSL and all of my social sharing button counts have reset to zero, which is expected, but apparently it's possible to tell those buttons to use the old http urls in order to bring back the old counts.
I just can't figure out how to do it for my setup, which is AddThis for the buttons and Php/Html for the code (Joomla actually, but that may be irrelevant).
The AddThis code is simple:
<div class="addthis_sharing_toolbox" data-url="THE URL"></div>
So my best guess is that I need to take the current URL, change it from https to http, and plug it into the above 'data-url'.
But looking at other threads here, there seems to be a lot of controversy about how to securely and correctly get the current URL, so that's where I'm getting stuck.
(And then on top of that, I'll need to make this switch only for past articles, not new ones, but that's another story.)
Any ideas?
Thanks very much,
Phil

The share counts are based off of the exact URL and unfortunately, the APIs for each of the sharing services (Facebook, Pinterest, etc.) treat the protocols as distinct URLs.
The only thing you could do prevent losing the share counts from existing URLs would be to set override the shared URL to be the old HTTP URL.
Then, you'd need to setup a 301 redirect on your site to redirect the visitor from the old URL to the new HTTPS URL after a visitor clicks the old URL from a shared link on Facebook (or any other service).
It looks like you already found the instructions for changing the URL that's shared (http://www.addthis.com/academy/setting-the-url-title-to-share/), so you would just set the data-url attribute to be the old (HTTP) URL.

Took me all day, but I finally figured this out! This gave me a lot of the answer, but I still had trouble tweaking it for AddThis.
Here's the code (the first line applies the fix only to articles published before Aug 1, 2016, because I don't need to make the change for newer articles):
<?php if (strtotime($this->item->publish_up) < 1470009600) : ?>
<script type="text/javascript">
function buttons(){
var kCanonical = document.querySelector("link[rel='canonical']").href;
window.kCompositeSlug = kCanonical.replace('https://','http://');
return;
}
buttons();
var addthis_share = { url: ''+kCompositeSlug+'' };
</script>
<?php endif; ?>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ID-GOES-HERE" async="async"></script>

Here is my code that worked on a client's Joomla / K2 site, this is part of my item template override:
<?php if (strtotime($this->item->publish_up) < 1503201600) : ?>
<!-- Non SSL Command for buttons here -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='YOURAPPIDHERE' data-link='http://www.yoursite.com<?php echo $this->item->link; ?>'></div>
<?php else: ?>
<!-- Regular SSL Command for buttons here -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='YOURAPPIDHERE'></div>
<?php endif; ?>
Details / analysis of solution here:
https://www.covingtoncreations.com/blog/solution-for-lost-share-count-after-moving-to-ssl-https

Does it work on a Joomla website which uses Sharethis not AddThis ?
Currently I have the following code in the
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<meta property="fb:app_id" content="XXXXXXXXXXXX"/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=XXXXXXXXXXXX=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Related

Does CloudFlare caches my jQuery logic?

I have a question and I don't have a server with cloudflare in order to test this, hope someone could help me.
I have an html page with a jQuery logic for example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</head>
<body>
<p id="demo"></p>
<script src="timer.js"></script>
</body>
</html>
timer.js
// A $( document ).ready() block.
$( document ).ready(function() {
myFunction();
});
function myFunction() {
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
$('#demo').html(time);
}
as we know Cloudflare caches JS and HTML content but my jQuery is a timer that will show the time each time I send a response.
What would happen with CloudFlare if I had Cache-Control: public, max-age=31536000 and Cloudflare caches everything.
is my jQuery logic going to work? or is the timer going to stop working ?
I am using a timer in this example but my real jQuery logic what it does is to hide some DIV content randomly, I have a website where I have like 5 rows this rows are always there but with jQuery I remove ($target.remove()) some of them randomly and the others I just shuffle them.
but I'd like to know if my logic will still working ? or my jQuery will continue as normal?
CloudFlare doesn't execute your JavaScript, it just caches it. If your script modifies the DOM in a user's browser, CloudFlare won't cache that.

Sample Code for Google Translate API

I want to use the Google Translate API in eclipse and I've checked the Google API website, but there isn't any sample code for the Google Translate API in Java. Can someone provide some and explain how to get started. I have already read the documentation on this API.
https://cloud.google.com/translate/v2/quickstart#JSONP
<html>
<head>
<title>Translate API Example</title>
</head>
<body>
<div id="sourceText">Hello world</div>
<div id="translation"></div>
<script>
function translateText(response) {
document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
}
</script>
<script>
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
var sourceText = escape(document.getElementById("sourceText").innerHTML);
// WARNING: Your API key will be visible in the page source.
// To prevent misuse, restrict your key to designated domains or use a
// proxy to hide your key.
var source = 'https://www.googleapis.com/language/translate/v2?key=YOUR_API_KEY&source=en&target=de&callback=translateText&q=' + sourceText;
newScript.src = source;
document.getElementsByTagName('head')[0].appendChild(newScript);
</script>
</body>
</html>
The Google Client Libraries are now the recommended APIs to use. You can now find Java specific Translation API Client Library examples in the documentation.
To report any issues with the new Java specific Client Libraries, you can directly file an issue on the GitHub Issue tracker.
you can installe this package for laravel
https://packagist.org/packages/charef/free-translate-api

Google+ share button with preview text + image

I try to add a Google+ button to my page. The button itself works, but the text and the image are always empty. I annotated my body and some elements with the schema.org tags, but it is not working. What am I doing wrong here?
<body itemscope itemtype="http://schema.org/Article">
<div itemprop="name">This is the article name</div>
<img itemprop="image" src="thumbnail.jpg" />
<p itemprop="description">This is the description of the article.</p>
<g:plus action="share" href="testUrl"></g:plus>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
You can debug what microdata is getting parsed by using the Google Structured Data Testing Tool. This can help you to understand what Google is seeing on your microdata annotations.
Try removing the URL from your share / +1. The target Url will fallback to the current page, which I'm assuming is you want people to share.
If that's not the problem, there are a few other things that might help:
Your snippet:
Did you use the Google+ Snippet generator? It tends to work pretty well. Also, if you have a complex page, it can help to use meta tags in the <header> section to begin with for debugging.
Proxies:
Which brings me to the next point, if there is a proxy blocking your page or security that prevents people from accessing it, that will block the share preview renderer. Make sure your page (share target) is publicly accessible.
Another possibility: if your page is cached in your server's proxy, this will prevent the page from being updated by the share preview renderer.
If you add an anchor link or query string to the end of the url, e.g. foo.com/index.html vs foo.com/index.html#test vs foo.com/index.html?test=yes it should ensure that a cached version without microdata will be included.
It might be the href attribute on your g:plus tag. Instead, change it to data-href.

Meta refreshing on the iTunes Store

Recently Apple has unified its affiliate management by providing links with target "itunes_store' of the kind:
In Arrivo! HD - Rome's and Milan's buses, taxi and metros, and trip sharing for the conscious visitor to the Ethernal city - Fabrizio Bartolomucci
Yet, in order to simplify its management, I would like to call it by means of a meta refresh from a page on my site only I have no hint about how the handle the target thing. The Windows open command just handles standard targets and if I enter 'itunes-store', I get an empty page.
Thanks for your help.
I'm pretty sure you can't specify a target on a meta refresh, but here is some JavaScript that does what you want. Just place this block somewhere on your page.
<script type="text/javascript">
var url = "https://itunes.apple.com/it/app/in-arrivo-hd-i-tempi-di-arrivo/id409812280?mt=8&uo=4&at=11l5Jz%22";
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('target', 'itunes_store');
link.click();
</script>
Funnily combining your solution with the normal meta refresh does the trick. This is the full code working both on the web, on the iPhone, on Facebook and by the QR code. Great!
<script type="text/javascript">
var url = "itmss://itunes.apple.com/it/app/in-arrivo-hd-i-tempi-di-arrivo/id409812280?mt=8&uo=4&at=11l5Jz%22";
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('target', 'itunes_store');
link.click();
</script>
<meta http-equiv="refresh" content="0; url=https://itunes.apple.com/us/app/in-arrivo!-hd-romes-milans/id409812280?mt=8&uo=4">

Google web fonts and SSL error

My site is working well with Google webfonts UNTIL the user hits the SSL portion of the site.
At that point, chrome throws the partial encoding error, and my cufon menu losses it's kerning.
I'm including my webfont with this css:
#font-face {
src: local('Lusitana'), url(https://themes.googleusercontent.com/static/fonts/lusitana
/v1/tAIvAkRzqMJf8Y4fM1R7PXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
My js console then gives me this error:
[blocked] The page at https://domain.com/ecommerce.php ran insecure content from
http://fonts.googleapis.com/css?family=Lusitana:regular,700&subset=latin.
Any ideas how I can get google fonts to force SSL?
Have you tried replacing https:// with // in the url? The request should use the correct protocol automatically.
locate this line on your HTML page (or template):
<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
and change it to this:
<link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS).
Enjoy!
To load google fonts that will work in non-secure, and SSL mode, try the following in your page header - (and remove what you've got there calling a https:// inside the CSS):
<script type="text/javascript">
WebFontConfig = { google: { families: [ 'Droid+Serif::latin' ] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
In my example, I'm using Droid Serif font, so swap that with yours.
You can read more on this here.
I also had this error caused by a theme in WordPress. It caused slow page loading and the following error reported by development console:
Mixed Content: The page at 'https://xxxxxxx.co.uk/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?
family=Droid+Serif%3A400%2C700%2C400italic%2C700italic&ver=5.4.1'. This
request has been blocked; the content must be served over HTTPS.
The culprit was Wordpress theme called "Fresh and Clean". It inherits code written in 2014 which contains 'pre-SSL' coding practices
To resolve the problem all need to do is make changes inside the following file in the theme:
/wp-content/themes/wpex-freshandclean/functions/scripts.php
Look inside for any occurences of http:// and change each one to https://