How do I call the URL of a link on a page?

[Dref]

I'm trying to use addthis on my blog. However, addthis will only share the current page URL. If i place the share link in a post, how can I customize the javascript to pick up the URL of the post instead of the current page? The post URL is linked in the title of the post. That way, when someone clicks to share, they will be sharing the specific post, not the page with the summary of posts.

Thanks!

[Fotiman]

AddThis has a "Sharing" API which seems to indicate you can simply specify the URL to share as a parameter on the link. For example:

<a href="link_to_addthis?url=http://example.com">

[Dref]

Thanks. I want to be able to insert the URL dynamically since I am inserting the share links at the template level. I assume I have to use some javascript to get the URL from the post title?

[Fotiman]

A better solution would be to generate the links server side (using PHP, etc.). If you use JavaScript, then your link won't work for people with JavaScript disabled.

[Dref]

Thanks-- it appears as though addthis doesn't work with javascript disabled anyway. on top of that, i'm on a hosted solution and don't have access to the server side. Do you know how I can place a javascript call into the Addthis API to grab the URL from the post title?

Thanks!

[Fotiman]

Well, it would depend on what your markup looked like. Can you provide a generic example (no specific links please) of what a snippet of your markup looks like? Use example.com as the domain in any links.

[Dref]

Here is the page source:

<div class="seBlogViewPostTitle">
<a href="/news/blog/Calling_a_Spade_a_Spade">Calling a Spade a Spade</a>
</div>
<div class="seBlogViewPostContent">...</div>
<a href="http://addthis.com/bookmark.php?v=250&amp;amp;username=YOURUSERNAME" class="addthis_button" linktype="EXTERNAL" newwindow="No" showtoolbar="No"><img width="125" height="16" border="0" seid="SEIDVALUE" src="http://example.com/bin/g/o/lg-share-en.gif" alt="" /></a>


and here is the markup in editor at the template level:

<div class="seBlogViewPostTitle"><secontainer name="postItemTitle" label="Post Item Title" /></div>
<div class="seBlogViewPostKeywords">
<span class="seBlogViewPostKeywordsDesc">Keywords:</span>
<secontainer name="postItemKeywords" label="Post Item Keywords" />
</div>
<div class="seBlogViewPostContent"><secontent name="postItemContent" label="Post Item Content" /></div>
<a href="http://addthis.com/bookmark.php?v=250&amp;amp;username=YOURUSERNAME" class="addthis_button" linktype="EXTERNAL" newwindow="No" showtoolbar="No"><img width="125" height="16" border="0" seid="SEIDVALUE" src="http://example.com/bin/g/o/lg-share-en.gif" alt="" /></a>



Thanks!

[edited by: Fotiman at 1:22 pm (utc) on Mar 25, 2010]
[edit reason] Removed possibly identifying info, removed non-essential text [/edit]

[Fotiman]

The AddThis help page for url and title [addthis.com] includes an example for specifying the URL to use:

<a href="http://www.addthis.com/bookmark.php" 
   class="addthis_button"
   addthis:url="http://example.com"
   addthis:title="An Example Title"
   addthis:description="An Example Description"></a>

So in your example, you would want to add an "addthis:url" attribute to your link that specifies the same value that's in the "postItemTitle" (which would be "/news/blog/Calling_a_Spade_a_Spade" using the example above). The correct way to do this would probably be to see if your template software has it's own markup/API that will return only the URL value that gets used in postItemTitle, because there's really no good way to determine which preceding link is the one that points to the page you want. Unfortunately, it seems that there is no public API for that "se" software, so you may need to contact the company that makes your template software to find out if there is a method for getting the URL.

[Fotiman]

A slightly less clean approach would be to fetch all of the links with class "addthis_button", then for each of those fetch the sibling element with class "seBlogViewPostTitle", then find the <a> within that element, fetch the href value, and attach the "addthis:url" attribute.

That would look something like this (you'd put this at the end, just before the closing </body> element):

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use('node', function (Y) {
  Y.all('.seBlogViewPostArea a.addthis_button').each(function () {
    this.setAttribute('addthis:url',this.previous('.seBlogViewPostTitle').one('a').getAttribute('href'));
  });
});
</script>

However, I'm not sure if adding the "addthis:url" attribute dynamically would work. If you give it a try, report back whether it works. :)

[Dref]

Thanks!

I added the javascript, do I need to add the addthis:url attribute somewhere in my markup? Right now, i've just got the following, same as above:

<div class="seBlogViewPostTitle"><secontainer name="postItemTitle" label="Post Item Title" /></div>
<div class="seBlogViewPostKeywords">
<span class="seBlogViewPostKeywordsDesc">Keywords:</span>
<secontainer name="postItemKeywords" label="Post Item Keywords" />
</div>
<div class="seBlogViewPostContent"><secontent name="postItemContent" label="Post Item Content" /></div>
<a href="http://addthis.com/bookmark.php?v=250&amp;amp;username=YOURUSERNAME" class="addthis_button" linktype="EXTERNAL" newwindow="No" showtoolbar="No"><img width="125" height="16" border="0" seid="SEIDVALUE" src="http://example.com/bin/g/o/lg-share-en.gif" alt="" /></a>

[Fotiman]

No, that's what this script does. It finds the addthis button and adds the "addthis:url" attribute, assigning it the value of the href from the previous link. I'm not sure if it will work though (the addthis code might parse that value before this script executes for example).

[Dref]

I hosted the javascript locally and it seems to be working, the only problem is, it's fetching links without the domain name. i.e. "/directory1/directory2/file.html" instead of "http://www.example.com/directory1/directory2/file.html" Can I add the domain in somehow?

[Fotiman]

Try this changing the line that sets the attribute to this:

this.setAttribute('addthis:url',Y.Node.getDOMNode(this.previous('.seBlogViewPostTitle').one('a')).href);

I think that will get the computed href value of the underlying DOM node.

[Dref]

Worked like a charm. Thanks so much!