blog/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md at 6f2e669873366c37503631b801f1fcb105e37e39

m/blog

Fork 0

mirror of https://github.com/kremalicious/blog.git synced 2024-11-11 23:55:16 +01:00

Matthias Kretschmann 6f2e669873 MEGA COMMIT, final stylus refactoring

2014-07-12 21:22:47 +02:00

32 KiB

Raw Blame History

layout

title

download

author

date

wordpress_id

Bonus: Coda Clips Icon

There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons.

If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs):

Download Coda Clips Icon

2. Usage

Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it.

That's because both collections have their placeholder selection (the ) located where the link text would be:

{% highlight html %}{% endhighlight %}

As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects.

And depending on which collection you use additional steps need to be done:

Everything you need to replace for yourself is written in capital letters:

YOUR URL Here you have to provide the URL you want to have submitted when users use your share link.

YOUR TITLE For all social sites this title has to be URL-encoded to work correctly. So be sure to replace everything like spaces, punctuation, etc. with their equivalent URL-encoding (e.g. %20 for a space). Here's a reference for this.

Apart from that some sites allow you to add and submit more informations than just the URL and the title and those things are also written in capital letters. Also I've included some usage comments where necessary like in the Digg link.

The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are:

<?php the_permalink();?> to create the URL dynamically depending on the article under which you have included the share and submit links.
<?php the_title(); ?> to dynamically create the title which is used when your content gets submitted to one of the sites.

Anyway, as I've said above some sites allow more to submit here and you'll find this also in capital letters. You have to adjust them manually too.

3. Quick Tutorial For Using Icons With These Links

I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS:

3.1 Use The <img /> Tag Element

Just include an img element wrapped inside the link tag, like so:

{% highlight html %} Delicious{% endhighlight %}

And if you want to just use an icon with no text use just an img element without providing any link text:

{% highlight html %}{% endhighlight %}

3.2 Use CSS Background Images

To me a more cleaner solution is to use the css background-image property to include the icon images. Just add a class or an id to every share link like so:

{% highlight html %}Delicious{% endhighlight %}

And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:

{% highlight css %} .delicious { background: url(delicious.png) no-repeat center center; padding-left: 20px; } {% endhighlight %}

If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:

{% highlight css %} .delicious { width: 16px; height: 16px; background: url(delicious.png) no-repeat center center; text-indent: -999999px; } {% endhighlight %}

4. HTML File Download And All The Links Separated

Sadly Coda's clips aren't in a portable format (Panic guys, consider this is a feature request!) so here's a comprehensive list for the non-Coda users of all the links included in the above Coda Clips with plain and the Wordpress version for every site. This comes as a downloadable stripped-down HTML file (meaning there's no HTML site structure included) and as a long list within in this article. First, here's the HTML file download. Just open this locally in your browser or in your favorite editor:

Download Share Links HTML File

And here's the huge list with all the share links in case you quickly want to grab just one of them. But be warned that this is a huge list so this is hidden by default.

Just click the Toggle All Links button to reveal them and click it again to hide the whole list again. If you want to import one of these links into Coda you can just use the Coda Clips bookmarklet created by kyle, as he points out in the comments.

↓ Toggle All Links ↓

Delicious

Plain <a href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious"></a>

Wordpress <a href="http://del.icio.us/post?url=<?php the_permalink();?>&title=<?php the_title(); ?>&notes=YOUR NOTES" title="Save To Delicious"></a>

StumbleUpon

Plain <a href="http://www.stumbleupon.com/submit?url=http://YOUR URL&title=YOUR TITLE" title="Stumble It!">StumbleUpon</a>

Wordpress <a href="http://www.stumbleupon.com/submit?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Stumble It!">StumbleUpon</a>

Facebook

Plain <a href="http://www.facebook.com/sharer.php?u=http://YOUR URL?t=YOUR TITLE" title="Share On Facebook">Facebook</a>

Wordpress <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>?t=<?php the_title(); ?>" title="Share On Facebook">Facebook</a>

Twitter

Plain <a href="http://twitter.com/home?status=YOUR MESSAGE ALONG WITH YOUR URL" title="Tweet This">Twitter</a>

Wordpress <a href="http://twitter.com/home?status=YOUR MESSAGE <?php the_title(); ?> <?php the_permalink();?>" title="Tweet This">Twitter</a>

Digg

Plain

<code class="html"><!-- Digg This Link

	Usage:
	--------------------------------------------------
	url		: URL-encode all strings as appropriate.
			  For example:
			  http%3A%2F%2Fyourwebsite%2Fyourstoryurl.html
			  Maximum length is 255 characters
	title	: Also URL-encode the story title
			  Maximum length 75 characters
	bodytext	: Also URL-encode the body text
			  Maximum length is 350 characters
	media	: default is news, choices are news, video or image
	topic	: only one category
-->
<a href="http://digg.com/submit?url=YOUR URL&
title=YOUR TITLE&
bodytext=YOUR DESCRIPTION&
media=NEWS, VIDEO or IMAGES&
topic=TOPIC&thumbnails=1" title="Digg This">Digg</a></code>

Wordpress <a href="http://digg.com/submit?url=<?php the_permalink();?>&title=<?php the_title(); ?>&bodytext=YOUR DESCRIPTION&media=NEWS, VIDEO or IMAGES&topic=TOPIC&thumbnails=1" title="Digg This">Digg</a>

Design Float

Plain <a href="http://www.designfloat.com/submit.php?url=http://YOUR URL&title=YOUR TITLE" title="Float This!">Design Float</a>

Wordpress <a href="http://www.designfloat.com/submit.php?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Float This!">Design Float</a>

Plain <a href="http://www.reddit.com/submit?url=http://YOUR URL&title=YOUR TITLE" title="Reddit">Reddit</a>

Wordpress <a href="http://www.reddit.com/submit?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Reddit">Reddit</a>

Technorati

Plain <a href="http://www.technorati.com/faves/?add=http://YOUR URL" title="Technorati">Technorati</a>

Wordpress <a href="http://www.technorati.com/faves/?add=<?php the_permalink();?>" title="Technorati">Technorati</a>

Yahoo Buzz

Plain <a href="http://buzz.yahoo.com/submit/?submitUrl=http://YOUR URL&submitHeadline=YOUR TITLE" title="Buzz Up!">Yahoo Buzz</a>

Wordpress <a href="http://buzz.yahoo.com/submit/?submitUrl=<?php the_permalink();?>&submitHeadline=<?php the_title(); ?>" title="Buzz Up!">Yahoo Buzz</a>

Newsvine

Plain <a href="http://www.newsvine.com/_tools/seed&save?u=http://YOUR URL&h=YOUR TITLE" title="Newsvine">Newsvine</a>

Wordpress <a href="http://www.newsvine.com/_tools/seed&save?u=<?php the_permalink();?>&h=<?php the_title(); ?>" title="Newsvine">Newsvine</a>

Magnolia

Plain <a href="http://ma.gnolia.com/bookmarklet/add?url=http://YOUR URL&title=YOUR TITLE" title="Magnolia">Magnolia</a>

Wordpress <a href="http://ma.gnolia.com/bookmarklet/add?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Magnolia">Magnolia</a>

Google Bookmarks

Plain <a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=http://YOUR URL&title=YOUR TITLE" title="Save To Google Bookmarks">Google Bookmarks</a>

Wordpress <a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Save To Google Bookmarks">Google Bookmarks</a>

FriendFeed

Plain <a href="http://friendfeed.com/share?url=http://YOUR URL&title=YOUR TITLE" title="Share ON FriendFeed">FriendFeed</a>

Wordpress <a href="http://friendfeed.com/share?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Share ON FriendFeed">FriendFeed</a>

Blogmarks

Plain <a href="http://blogmarks.net/my/new.php?mini=1&url=http://YOUR URL&title=YOUR TITLE" title="Save To Blogmarks">Blogmarks</a>

Wordpress <a href="http://blogmarks.net/my/new.php?mini=1&url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Save To Blogmarks">Blogmarks</a>

MySpace

Plain <a href="http://www.myspace.com/Modules/PostTo/Pages/?l=3&u=http://YOUR URL&t=YOUR TITLE&c=YOUR COMMENT" title="MySpace">MySpace</a>

Wordpress <a href="http://www.myspace.com/Modules/PostTo/Pages/?l=3&u=<?php the_permalink();?>&t=<?php the_title(); ?>&c=YOUR COMMENT" title="MySpace">MySpace</a>

Script & Style

Plain <a href="http://scriptandstyle.com/submit?url=http://>YOUR URL&title=YOUR TITLE" title="Script & Style">Script & Style</a>

Wordpress <a href="http://scriptandstyle.com/submit?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Script & Style">Script & Style</a>

Blinklist

Plain <a href="http://blinklist.com/index.php?Action=Blink/addblink.php&Url=http://YOUR URL&Title=YOUR TITLE" title="Blinklist">Blinklist</a>

Wordpress <a href="http://blinklist.com/index.php?Action=Blink/addblink.php&Url=<?php the_permalink();?>&Title=<?php the_title(); ?>" title="Blinklist">Blinklist</a>

Slashdot

Plain <a href="http://slashdot.org/bookmark.pl?url=http://YOUR URL&title=YOUR TITLE" title="Slashdot">Slashdot</a>

Wordpress <a href="http://slashdot.org/bookmark.pl?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Slashdot">Slashdot</a>

Plain <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://YOUR URL&title=YOUR TITLE&summary=YOUR SUMMARY&source=" title="LinkedIn">LinkedIn</a>

Wordpress <a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&title=<?php the_title(); ?>&summary=YOUR SUMMARY&source=" title="LinkedIn">LinkedIn</a>

Windows Live

Plain <a href="https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=http://YOUR URL&title=YOUR TITLE&top=1" title="Windows Live">Windows Live</a>

Wordpress <a href="https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=<?php the_permalink();?>&title=<?php the_title(); ?>&top=1" title="Windows Live">Windows Live</a>

Furl

Plain <a href="http://furl.net/storeIt.jsp?u=http://YOUR URL&t=YOUR TITLE" title="Furl">Furl</a>

Wordpress <a href="http://furl.net/storeIt.jsp?u=<?php the_permalink();?>&t=<?php the_title(); ?>" title="Furl">Furl</a>

Yahoo Bookmarks

Plain <a href="http://bookmarks.yahoo.com/toolbar/savebm?opener=tb&u=http://YOUR URL&t=YOUR TILE" title="Yahoo! Bookmarks">Yahoo Bookmarks</a>

Wordpress <a href="http://bookmarks.yahoo.com/toolbar/savebm?opener=tb&u=<?php the_permalink();?>&t=<?php the_title(); ?>" title="Yahoo! Bookmarks">Yahoo Bookmarks</a>

Mixx

Plain <a href="http://www.mixx.com/submit?page_url=http://YOUR URL" title="Mixx">Mixx</a>

Wordpress <a href="http://www.mixx.com/submit?page_url=<?php the_permalink();?>" title="Mixx">Mixx</a>

Propeller

Plain <a href="http://www.propeller.com/submit/?U=http://YOUR URL&T=YOUR TITLE" title="Propeller">Propeller</a>

Wordpress <a href="http://www.propeller.com/submit/?U=<?php the_permalink();?>&T=<?php the_title(); ?>" title="Propeller">Propeller</a>

Yigg

Plain <a href="http://www.yigg.de/neu?exturl=http://YOUR URL&exttitle=YOUR TITLE" title="Yigg">Yigg</a>

Wordpress <a href="http://www.yigg.de/neu?exturl=<?php the_permalink();?>&exttitle=<?php the_title(); ?>" title="Yigg">Yigg</a>

Mr Wong

Plain <a href="http://www.mister-wong.com/index.php?action=addurl&bm_url=http://YOUR URL&bm_description=YOUR TITLE" title="Mr Wong">Mr Wong</a>

Wordpress <a href="http://www.mister-wong.com/index.php?action=addurl&bm_url=<?php the_permalink();?>&bm_description=<?php the_title(); ?>" title="Mr Wong">Mr Wong</a>

Diigo

Plain <a href="http://secure.diigo.com/post?url=http://YOUR URL&title=YOUR TITLE" title="Diigo">Diigo</a>

Wordpress <a href="http://secure.diigo.com/post?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Diigo">Diigo</a>

N4G

Plain <a href="http://www.n4g.com/tips.aspx?url=http://YOUR URL&title=YOUR TITLE" title="N4G">N4G</a>

Wordpress <a href="http://www.n4g.com/tips.aspx?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="N4G">N4G</a>

Current

Plain <a href="http://current.com/clipper.htm?url=http://YOUR URL&title=YOUR TITLE&src=st" title="Current">Current</a>

Wordpress <a href="http://current.com/clipper.htm?url=<?php the_permalink();?>&title=<?php the_title(); ?>&src=st" title="Current">Current</a>

Simpy

Plain <a href="http://www.simpy.com/simpy/LinkAdd.do?href=http://YOUR URL&title=YOUR TITLE" title="Simpy">Simpy</a>

Wordpress <a href="http://www.simpy.com/simpy/LinkAdd.do?href=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Simpy">Simpy</a>

Oknotizie

Plain <a href="http://oknotizie.alice.it/post?url=http://YOUR URL&title=YOUR TITLE" title="Oknotizie">Oknotizie</a>

Wordpress <a href="http://oknotizie.alice.it/post?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Oknotizie">Oknotizie</a>

Care2

Plain <a href="http://www.care2.com/news/compose?share[link_url]=http://YOUR URL&share[title]=YOUR TITLE" title="Care2">Care2</a>

Wordpress <a href="http://www.care2.com/news/compose?share[link_url]=<?php the_permalink();?>&share[title]=<?php the_title(); ?>" title="Care2">Care2</a>

Faves

Plain <a href="http://www.faves.com/Authoring.aspx?u=http://YOUR URL&t=YOUR TITLE" title="Faves">Faves</a>

Wordpress <a href="http://www.faves.com/Authoring.aspx?u=<?php the_permalink();?>&t=<?php the_title(); ?>" title="Faves">Faves</a>

Meneame

Plain <a href="http://meneame.net/submit.php?url=http://YOUR URL" title="Meneame">Meneame</a>

Wordpress <a href="http://meneame.net/submit.php?url=<?php the_permalink();?>" title="Meneame">Meneame</a>

Fresqui

Plain <a href="http://ocio.fresqui.com/post?url=http://YOUR URL&title=YOUR TITLE" title="Fresqui">Fresqui</a>

Wordpress <a href="http://ocio.fresqui.com/post?url=<?php the_permalink();?>&title=<?php the_title(); ?>" title="Fresqui">Fresqui</a>

Funp

Plain <a href="http://funp.com/pages/submit/add.php?title=YOUR TITLE&url=http://YOUR URL&via=tools" title="Funp">Funp</a>

Wordpress <a href="http://funp.com/pages/submit/add.php?title=<?php the_title(); ?>&url=<?php the_permalink();?>&via=tools" title="Funp">Funp</a>

Kirtsy

Plain <a href="http://www.kirtsy.com/submit.php?url=http://YOUR URL" title="Kirtsy">Kirtsy</a>

Wordpress <a href="http://www.kirtsy.com/submit.php?url=<?php the_permalink();?>" title="Kirtsy">Kirtsy</a>

Dealspl.us

Plain <a href="http://dealspl.us/add.php?ibm=1&url=http://YOUR URL" title="Dealspl.us">Dealspl.us</a>

Wordpress <a href="http://dealspl.us/add.php?ibm=1&url=<?php the_permalink();?>" title="Dealspl.us">Dealspl.us</a>

Xanga

Plain <a href="http://www.xanga.com/private/editorx.aspx?t=YOUR TITLE&u=http://YOUR URL&s=" title="Xanga">Xanga</a>

Wordpress <a href="http://www.xanga.com/private/editorx.aspx?t=<?php the_title(); ?>&u=<?php the_permalink();?>&s=" title="Xanga">Xanga</a>

Sphinn

Plain <a href="http://sphinn.com/submit.php?url=http://YOUR URL" title="Sphinn">Sphinn</a>

Wordpress <a href="http://sphinn.com/submit.php?url=<?php the_permalink();?>" title="Sphinn">Sphinn</a>

5. Please Jump Around, Then Spread The Word

If you ever wanted or had to include such sharing links manually in your sites and searched hours for those you should already have recognized the value of this article and if not already happened you can now jump around to express your enjoyment. After this you should immediately bookmark or share this site on your favorite social site. And while you're at it I could use another coffee.

And that's it. If you think there should be another site added feel free to post them in the comments or shoot me a note via my contact form. Also possible errors or any additions are much appreciated. If useful I will add your additions or more site links to the codaclips files and will update the article.

Also I would like to provide these links as Espresso snippets probably as part of the HTML-(or PHP?)-Sugar but this seems to be rather complicated at the moment. As soon as this becomes more straightforward I will add these to this article. But if you're already advanced in creating Espresso sugars and would like to help me with this please contact me!

32 KiB Raw Blame History

Share Links Coda Clips Download