Generating share links in your ExpressionEngine templates

12-06-2010

Making custom links for sharing content is always an annoying process. Go to each service you need, try and figure out how to pass information to it via a URL. Rinse, lather, repeat.

Below I’ll document some of the most common share links and their basic URL structures, and then I’ll show you how we can easily implement this into an ExpressionEngine channel entry page.

<!-- Twitter -->
http://twitter.com/home?status=http://domain.com/

<!-- Facebook -->
http://www.facebook.com/sharer.php?u=URL&t=Title

<!-- Delicious -->
http://delicious.com/save?url=URL&amp;title=Title

<!-- Digg -->
http://digg.com/submit?url=URL&amp;title=Title

<!-- Reddit -->
http://www.reddit.com/submit?url=URL&title=Title

<!-- Forrst -->
http://forrst.com/posts/new?b=1&v=3&u=URL&t=Title&s=

<!-- Tumblr -->
<!-- With Tumblr you can't have the 'http://' prefix of the url or it will throw an error -->
http://www.tumblr.com/share?v=3&u=URL&t=Title&s=

<!-- Posterous -->
http://posterous.com/share?linkto=URL&title=Title

<!-- Instapaper -->
<!-- Just like Tumblr, you can't have the 'http://' prefix of the url or it will throw an error. -->
http://www.instapaper.com/hello2?url=URL&title=Title

<!-- Read it later -->
https://readitlaterlist.com/save?url=URL&title=Title

Now that we’ve got the basics out of the way, let’s convert this into an ExpressionEngine gangster rap. I'll assumes you understand the basic ExpressionEngine variables. I’m also going to assumes your channel entries are located at domain.com/segment_1/url_title/ (you can easily change this to fit your needs). Here’s the code that would go in your individual channel entry pages:

{preload_replace:my_channel="blog"}
{exp:channel:entries
disable="member_data|pagination"
url_title="{segment_2}"
channel="{my_channel}"
}
<ul>
<li><a href="http://twitter.com/home?status={site_url}/{segment_1}/{entry_id}/ {categories}%23{category_name} {/categories}">Twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u={site_url}/{segment_1}/{url_title}/&t={title}">Facebook</a></li>
<li><a href="http://delicious.com/save?url={site_url}/{segment_1}/{url_title}/&amp;title=Garrett Winder - {title}">Delicious</a></li>
<li><a href="http://digg.com/submit?url={site_url}/{segment_1}/{url_title}&amp;title={title}">Digg</a></li>
<li><a href="http://www.reddit.com/submit?url={site_url}/{segment_1}/{url_title}&title={title}">Reddit</a></li>
<li><a href="http://forrst.com/posts/new?b=1&v=3&u={site_url}/{segment_1}/{url_title}/&t={title}&s=">Forrst</a></li>
<li><a href="http://www.tumblr.com/share?v=3&u=domain.com/{segment_1}/{url_title}/&t={title}&s=">Tumblr</a></li>
<li><a href="http://posterous.com/share?linkto={site_url}/{segment_1}/{url_title}/&title={title}&selection={excerpt}">Posterous</a></li>
<li><a href="http://www.instapaper.com/hello2?url=domain.com/{segment_1}/{url_title}/&title={title}&description={excerpt}">Instapaper</a></li>
<li><a href="https://readitlaterlist.com/save?url={site_url}/{segment_1}/{url_title}/&title={title}">Read it later</a></li>
</ul>
{/exp:channel:entries}

Very straight forward - we’ve got a channel loop that’s based off of our current channel entry (pulling the url title from segment_2). We’re using ExpressionEngine variables to generate the URLs and titles in the share links. For Twitter, I’m using the categories variable pair for hash tags. For Posterous and Instapaper I’ve added a fictional excerpt field to the optional selection and description params.

Obviously, you don’t need to use all of these, just plug-and-play the links you want to put on your own site. One final not, for the twitter link, I’d recommend using a shorter url. You can either use some sort of url shortening plugin or easily role your own short urls like this. Enjoy!