I would like to add a new button with a link to a custom url on the addThis slideBar generated by using addThis Smart Layer Api (you can have a look at the documentation here)
I would like to add a custom service that is just a link to a precise page.
Is it possible?
Here is the sample of the code I use to generate the side bar.
addthis.layers({
'theme': 'transparent',
'share': {
'position': 'left',
'services': 'facebook,twitter,google_plusone_share,pinterest_share,print,more'
}
});
Is it Possible?
Although it's not particularly helpful to hear, I don't think that this can be accomplished with the AddThis SmartLayers API at this time. You may have found differently though, in which case I'm curious to hear about how you figured out to do it.
After perusing the docs and playing with it for a solid amount of time I can't figure out a way to insert a new option into the services on any of the layers (Share, Follow, What's Next, or Recommendation layers). The only way that I think adding a service to any of their SmartLayers would work is to submit it to AddThis to get it officially approved.
On the bottom of this page you can submit new services to AddThis to be implemented into their API completely. The massive downside to this in terms of your problem is that the submitted service needs to be OExchange compatible. For some projects this may not be feasible, but it might not be too much of a roadblock if you're free to implement compatibility in whatever web application you want to add to their services.
Small discussion about the API.
AddThis' platform is based around being able to show the most relevant marketing to its users, and so making custom buttons/services is discouraged by AddThis. They try to encourage developers to use their built in personalization by saying things such as:
We encourage you, however, to take advantage of automatic menu and
toolbox personalization. You'll see an increase in overall sharing of
about 20%, particularly from your site's international visitors, who
use many of our other hundreds of sharing services!
I think that this is why AddThis is not the most easily customizable service on the planet. However it is very good at what it boasts, showing relevant marketing to users.
The Workaround
These may be aspects of the API that you're familiar with and know how to use but I figure it can't hurt to help by providing them since the answer to the originally proposed question was "Probably not".
You can make what AddThis refers to as a toolbox of buttons and then put your service anywhere in the mix. This is done using HTML instead of JavaScript and it looks like this for the "default" toolbox:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This produces clickable sharing service links for the top 4 most
preferred services as decided by AddThis.
Now let's make one of these buttons our own. We will just use stackoverflow.com as an example.
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_stackoverflow" href="http://www.stackoverflow.com">
<img src ="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" width="16" height="16" border="0">
</img>
</a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This code produces a clickable stack overflow button alongside the top
buttons as suggested by AddThis!
Although this isn't what you're looking for exactly, I hope that it helps!
The addthis creates a division with id #at4-share and creates the links within it, try to prepend ( or append ) using jquery an "a" element similar to the elements created by the addthis plugin in this div, and create a custom class similar to aticon-print in your css and set your custom icon.
I haven't tried it though but i think it shall work.
$("#at4-share").prepend('<a class="at4-share-btn at-svc-print"
href="https://stackoverflow.com/questions/31108214/how-to-increase-audio-play-speed-using-javascript">
<span class=" at4-icon aticon-print" title="KAD">KAD</span></a>');
Related
We run a Ruby on Rails 3.2 web application that uses a standard mix of rails and jquery.
Recently, we noticed a strange div element appearing in our production code. It seems to only show up when we render views with strings that also contain hyperlinks.
Here's an example:
We have a string in our view, that we want rendered as HTML:
"Try to search <a href='/search?q=hiring'>hiring</a>"
When we render the page in production though, we get the following:
"Try to search <a href="azarvuttcexyytzq.html" id="qqqqtra" rel="file">trufarwdstrzyzdyw</div>."
We're not sure why but the following div is being appended to our link:
<div style="display: none;">trufarwdstrzyzdyw</div>
What's strange is that we don't think that the file azarvuttcexyytzq.html exists on our servers, and we also found out that "file" is not an acceptable rel value for a hyperlink's relation attribute.
So, where could the div be coming from?
One thought is that it is coming from some analytics library in our system, since we're using Google Analytics. But we can't seem to confirm that idea or rule it out.
Does anyone know of a library that causes behavior like this?
Any help or insight would be appreciated.
If there is no developer who has done this (intentionally or otherwise) by appending a div with a random hyperlink in your application, then there is a high probability that your application server, some library or a gem you are using is compromised. It would be good to do an audit of your code/server and ensure that you are using the original version of all the gems and libraries and no malicious code is otherwise included in your app code.
We had the exact same issue, although intermittently, and it was Distil networks injecting in our case. To verify we took Distil out for the site and it worked like a charm!
Although, have yet to find how to get it working with Distil, will update the answer if/when we do
We had the same issue, our application behind Distil as well as in other comments.
If you use Distil, read this:
https://help.distilnetworks.com/hc/en-us/articles/235705127-Optimizing-Honeypot-Links-for-Pages-with-Inline-JavaScript
In short: Add the following comment near the top of your page (and above the JS) to force Distil injection to happen there: </a> -–> You can also add any other custom, a unique comment which Distil could use to inject the honeypot link code into.
We just updated portions of our website with AngularJS - particularly the login page. When I look at the search results in Google, the cached page and the small snippet it displays automatically is the raw Angular markup. So, lots of {{model.username}}, {{model.errorMessage}}, etc.
I won't link the results since it's too embarrassing.
Any idea of how do get Google to actually store the page as rendered vs. the raw HTML?
It would be wonderful if you would convert your embarrassment into a community service for all of us by testing something, since you are seeing a condition few people admit to or want to reproduce themselves. :)
Google is known to be relatively (or very, depending on who you ask) good at ignoring hidden content. They implemented this way back when people used to keyword-stuff content by using blocks that were either set to "display: none" or had a tiny/unreadable/white-on-white font.
What you're seeing is a problem for more than just SEO, so I'm suggesting this because things like prerender.io are great but they only solve that one piece. What about users who simply have slow browsers? Well, it turns out Angular has a great solution for this called ngCloak. It hides things like template content fields (ngModel mappings and bindings, expressions, etc) until Angular is ready to fill them in itself.
It's very easy to implement this; you just need a small block of CSS (in an early-loaded file, or embedded directly into your HTML page):
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and then you apply the ngCloak directive to items that are affected, or to a high-level parent (like your ng-view DIV):
<div id="wrapper" ng-cloak>
<!-- Page content here -->
</div>
This works kind of like a no-js target, but specifically for AngularJS.
You'll still want something specific to give Google that is actually good material, but at least with the above you can filter out everything else.
SEO for angular is a really big question/issue depending on your perspective. I would start by reading http://www.ng-newsletter.com/posts/serious-angular-seo.html and http://www.yearofmoo.com/2012/11/angularjs-and-seo.html to get you started.
To sum up your primary options:
change your routing system to use the hashbang (#!). Then sites like google and facebook will convert the hashbang to _escaped_fragment_ before querying your page. This gives your server an opportunity to return different html.
use a service like http://prerender.io which will pre render and cache rendered versions of your site for you, which will be provided to google in place of your site.
There are still issues with things like sharing to reddit and stumbleupon for example, as they are lazy and don't want to develop to cater to angular based sites. So for certain circumstances you will have to get creative.
Update: One thing we have done on a recent project is look at the various user agents to determine if crawling systems are asking for page information. This way we can serve what ever we like.
I built a quotation mashup. I added a bunch of social sharing buttons. It worked.
I decide to add Google+ and it does not get along with the other JavaScript / HTML. So I commented out all the other social sharing buttons and the Google+ button still doesn't work. Then I try a different quotation, one without a YouTube video it works, one with a YouTube video does not show a Google+ button. That is what I have discovered.
Switching YouTube display code does help, but Facebook like doesn't seem to work now, but Facebook Share does and I'm not 100% sold on my OpenGraph and thus Google+ meta data. Facebook updated their button recently and now I find 'Share' works better than 'Like'. Both can be tracked in Google Analytics in theory. I would like the quotation to appear in the description, that was working for Facebook but I can't get that to happen on Google+. Perhaps I need more meta data. I changed to og:type article that seems to help.
Quotation Collection
Quotation with Video
Quotation with no YouTube Video
I use PHP to build the JavaScript but the Google+ button as far as I can tell gets everything from the metadata. There also might be something wrong with my metadata as I don't do it as cleanly as I do on this page I've revised much of my meta data to try and get my shares to look their best. I need last.fm to provide bigger images or to revisit what I can get out of the wikipedia.
I got all four buttons well 5 social sharing buttons working on my blog, but I used two plugins, the Pinterest button is probably not tracked by Google Analytics but the other four are. I'm pretty sure I almost had it working last night, scarily the li tag seems to make a difference if you use divs and a bunch of CSS it seems to work better than using a list with one button in each item.
<!-- Professional Share Plugin--><div class="ProfessionalShareBox"><div class="PSBtn"><script type="IN/Share" data-counter="right" data-showzero="true" data-onsuccess="LinkedInShare"></script></div><div class="PSBtn"></div><div class="PSBtn"><div class="g-plusone" data-size="medium"></div></div><div class="PSBtn"><div class="fb-like" data-href="http://blog.muschamp.ca/2013/11/24/back-from-mexico/" data-send="false" data-width="90" data-layout="button_count" data-show-faces="false" data-action="recommend"></div></div></div><div id="fb-root"></div><div class='yarpp-related yarpp-related-none'>
I might switch to not using an ordered list of buttons and I also might steal from arguments from Ken's plugin seeing as I already gave him advice on how I would do it. ;-) Twitter Cards FTW!
I solved my basic problem. I changed how I was including YouTube videos, switching from probably the iFrame based include to the object include. Now I need to tweak my meta data to get it to display even better in Google+. I also tweaked my OpenGraph and Twitter Card meta data and am trying to find larger images through various APIs. My best effort at this can be seen in this blog post.
For example, I have profile page and select with 'About', 'Photos', 'Videos' section etc., and I don't want to refresh page each time I change section, I want just to change the content of container with Javascript. Sure it wouldn't be handy to write markup of pages in Javascript file, and my idea would be to write div's of each view and display only one of them:
<div id="about>About content</div>
<div id="photos" style="display: none;">Photos content</div>
However, I think there are better ways to do it, because I don't like keeping hidden views on the page. Also in most cases content in views should be generated by script, so it's looks like job for a template engine, but I'm not sure there are such in Javascript.
So what would be the best way to implement this in Javascript. I hope my idea is clear. Thanks in advance!
Try use mustache it is a template engine for javascript.
Also, you can use AngularJS templates (dynamically loaded into page on demand)
It is very easy to use. (However contains other things you might not want.. but should want ;) )
Use jQuery to fetch for the views whenever the user clicks on a link.
For example, bind the click event:
$('#clickToSeePhotos').click(function(){
$('#photosContainer').load('pathTo/photos.html');
});
$('#clickToSeeAbout').click(function(){
$('#aboutContainer').load('pathTo/about.html');
});
Here is the html:
<a id="clickToSeePhotos" href="#">Photos<a/>
<div id="photosContainer"></div>
<a id="clickToSeeAbout" href="#">About<a/>
<div id="aboutContainer"></div>
Here is a link to jQuery's page where they provide more info and examples for load
http://api.jquery.com/load/
You may download the jQuery library and use it on your server. However, as #Cybrix suggests you can also point to the library hosted by Google. See this link. At the end this could improve performance for your users.
My webapp uses both Rails and JS and I would like users to be able to embed the images they upload to any blog/site.
What do I need to know, from a development point-of-view to allow me to create the functionality that generates an 'embed' link. It can be either a link like YouTube does, or a JS snippet or anything.
Just want to get a high-level overview of what I need to be able to do and how to proceed.
Thanks.
I would try using iframe. I created a widget which used javascript and I put it all into a single html file hosted on my website. Then I gave away an iframe snippet like this for example...
<iframe src="http://mywesbite.com/myWidget.html"></iframe>
The user can simply place the iframe snippet into their website and that's it!
I'm a little bit late to the party here, but I just wanted to add to Jacob's answer.
You can easily allow the user to customize the embedded content (perhaps choose light on dark vs. dark on light text to more closely match the page's environment/design) by using query params within the iframe src:
<iframe src="http://___.com/widget?theme=light&size=large"></iframe>
of course you'd probably want to build a UI to allow the user to make these distinct changes... you can't expect average user's to do that by hand:)
Vimeo's UI for customizing embedded videos is pretty nice if you want a best case scenario.