georgiee/social urls

## social urls

How-To: Create Custom Share Buttons For All The Popular Social Services
JUNE 16TH, 2010 | HOW-TO | 72 COMMENTS
For those of you that follow me, you are probably already know that I recently redesigned my post footer. For those that don’t know a post footer is the area just below this post with the “Share It!” and “Related Post” sections. I took it on myself to create a completely custom footer area with share links to many of the popular social services available today. I like my blog to be different from the other gazillion out there, so I choose to minimize my plugin use and create custom solutions.

Most of the popular social service out there offer pre-made javascript buttons that allow you share your pages or articles on their service. While this does make it easy, there is one problem with using their code generating methods; you are stuck with their styles and icons. I wanted to use a custom style with a different set of icons. To accomplish this, I had to take advantage of the services various “URL” submission methods. All the services offer this method, but most of them are poorly documented and are hard to find details on. After spending hours browsing the web for the various “URL” submission methods, I decided that once I finished I would post them all together in one place so people can easily find them and create their own custom share buttons.

Below, I am going to offer you the various services URL’s and teach you how to use them on your site.

Twitter

http://twitter.com/home?status=[TITLE]+[URL]
Pinterest

http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]
Facebook

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Google+

https://plus.google.com/share?url=[URL]

Reddit

http://www.reddit.com/submit?url=[URL]&title=[TITLE]
Delicious

http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]
Tapiture

http://tapiture.com/bookmarklet/image?img_src=[IMAGE]&page_url=[URL]&page_title=[TITLE]&img_title=[TITLE]&img_width=[IMG WIDTH]img_height=[IMG HEIGHT]
StumbleUpon
http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]
Slashdot

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]
Technorati

http://technorati.com/faves?add=[URL]&title=[TITLE]
Posterous

http://posterous.com/share?linkto=[URL]
Tumblr

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]
Google Bookmarks

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]
Newsvine

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]
Ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]
Evernote

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]
Friendfeed

http://www.friendfeed.com/share?url=[URL]&title=[TITLE]
Those are the URL's you need to know, now, I know some of you are say what do I do with them? These are the URL you link your social icons too. Replace [TITLE] with the title of the page or article. Replace [URL] with the link back to the page or article. Both of these values need to be URL in encoded for the submissions to process correctly. If you are using php, you can easily URL encode anything with:

<?PHP echo urlencode("VARIBLE"); ?>
If you are using WordPress, you can easily substitue the [URL] and [TITLE] values with WordPress codex functions. Below is the code you can use to replace the [TITLE] value:

<?php print(urlencode(the_title())); ?>
Now, the the code to replace the [URL] value:

<?php print(urlencode(get_permalink())); ?>
Now, lets take a look at it all put together for a general page with a "Share on Twitter" button:

<a href="http://twitter.com/home?status=This is the blog title.+http%3A%2F%2Fatlchris.com%2F1656%2Flink-to-page">
<img src="http://atlchris.com/wp-content/themes/ATLChris/images/twitter.png" height="18" width="18" alt="Share On Twitter" />
</a>
Now, a wordpress example. This example substitutes the [TITLE] and [URL] values automatically with the current articles information with URL encoding:

<a href="http://twitter.com/home?status=<?php print(urlencode(get_permalink())); ?>+<?php print(urlencode(the_title())); ?>">
<img src="http://atlchris.com/wp-content/themes/ATLChris/images/twitter.png" height="18" width="18" alt="Share On Twitter" />
</a>
I hope this helps to you create your very own custom share buttons. If you have any questions, please ask them below and I will answer them to the best of my ability. If I missed a service that you would like me to add, please leave a comment below.

	How-To: Create Custom Share Buttons For All The Popular Social Services
	JUNE 16TH, 2010 \| HOW-TO \| 72 COMMENTS
	For those of you that follow me, you are probably already know that I recently redesigned my post footer. For those that don’t know a post footer is the area just below this post with the “Share It!” and “Related Post” sections. I took it on myself to create a completely custom footer area with share links to many of the popular social services available today. I like my blog to be different from the other gazillion out there, so I choose to minimize my plugin use and create custom solutions.

	Most of the popular social service out there offer pre-made javascript buttons that allow you share your pages or articles on their service. While this does make it easy, there is one problem with using their code generating methods; you are stuck with their styles and icons. I wanted to use a custom style with a different set of icons. To accomplish this, I had to take advantage of the services various “URL” submission methods. All the services offer this method, but most of them are poorly documented and are hard to find details on. After spending hours browsing the web for the various “URL” submission methods, I decided that once I finished I would post them all together in one place so people can easily find them and create their own custom share buttons.

	Below, I am going to offer you the various services URL’s and teach you how to use them on your site.

	Twitter

	http://twitter.com/home?status=[TITLE]+[URL]
	Pinterest

	http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]
	Facebook

	http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
	Google+

	https://plus.google.com/share?url=[URL]

	Reddit

	http://www.reddit.com/submit?url=[URL]&title=[TITLE]
	Delicious

	http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]
	Tapiture

	http://tapiture.com/bookmarklet/image?img_src=[IMAGE]&page_url=[URL]&page_title=[TITLE]&img_title=[TITLE]&img_width=[IMG WIDTH]img_height=[IMG HEIGHT]
	StumbleUpon
	http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
	Linkedin

	http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]
	Slashdot

	http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]
	Technorati

	http://technorati.com/faves?add=[URL]&title=[TITLE]
	Posterous

	http://posterous.com/share?linkto=[URL]
	Tumblr

	http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]
	Google Bookmarks

	http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]
	Newsvine

	http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]
	Ping.fm

	http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]
	Evernote

	http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]
	Friendfeed

	http://www.friendfeed.com/share?url=[URL]&title=[TITLE]
	Those are the URL's you need to know, now, I know some of you are say what do I do with them? These are the URL you link your social icons too. Replace [TITLE] with the title of the page or article. Replace [URL] with the link back to the page or article. Both of these values need to be URL in encoded for the submissions to process correctly. If you are using php, you can easily URL encode anything with:

	<?PHP echo urlencode("VARIBLE"); ?>
	If you are using WordPress, you can easily substitue the [URL] and [TITLE] values with WordPress codex functions. Below is the code you can use to replace the [TITLE] value:

	<?php print(urlencode(the_title())); ?>
	Now, the the code to replace the [URL] value:

	<?php print(urlencode(get_permalink())); ?>
	Now, lets take a look at it all put together for a general page with a "Share on Twitter" button:

	<a href="http://twitter.com/home?status=This is the blog title.+http%3A%2F%2Fatlchris.com%2F1656%2Flink-to-page">
	<img src="http://atlchris.com/wp-content/themes/ATLChris/images/twitter.png" height="18" width="18" alt="Share On Twitter" />
	</a>
	Now, a wordpress example. This example substitutes the [TITLE] and [URL] values automatically with the current articles information with URL encoding:

	<a href="http://twitter.com/home?status=<?php print(urlencode(get_permalink())); ?>+<?php print(urlencode(the_title())); ?>">
	<img src="http://atlchris.com/wp-content/themes/ATLChris/images/twitter.png" height="18" width="18" alt="Share On Twitter" />
	</a>
	I hope this helps to you create your very own custom share buttons. If you have any questions, please ask them below and I will answer them to the best of my ability. If I missed a service that you would like me to add, please leave a comment below.