Create a Custom Facebook Share Buttons that work like Magic!

Create a Custom Facebook Share Buttons that work like Magic!

Sharing on Facebook is great for spreading the news about your new product, service, or story. You can create your very own custom Share button that can you can add to your web page, or even to an email or newsletter. It’s really simple, but you do need to be able to look at web code without developing tremors. 🙂

The heart of your sharing code looks like this:
[http://www.facebook.com/sharer/sharer.php?u=http://prosocialtools.com]

Let’s break it down. The first part is simple, because it’s the url to Facebook. The next part is a file path to a PHP script that lives on Facebook.com called sharer.php and it’s inside a folder called sharer. That last part “u=” tells the script to set the symbol “u” to the web address that follows the equal sign. You really don’t need to know that the symbol is a variable, but that’s what it is.

There are two neat things about this little script. The first is that you can set “u” to just about anything on the web, including a YouTube video, a blog page, another Facebook page, or whatever you want, as long as you can go to it with your web browser.

The other neat thing is that you can include that entire line of code inside an “href” tag, meaning you can hyperlink text or an image.

Here’s an example using text. So that you can see the code, I switched out the angle brackets used by html for square brackets. You would have to change them back to make the code work.

[a href=”http://www.facebook.com/sharer/sharer.php?u=http://prosocialtools.com/”] Share This[/a]

That’s the code to create this: Share This

If you click on “share this” you will see it invites you to share this website on your Facebook wall, or page, or group, or send as a private message. Go ahead and try it, then come right back.

Here’s a more elaborate version, using a graphic button. Instead of the text that says Share This, we’ll replace it with the path to an image. This involves using an image source tag, which looks like this:
[img src="http://prosocialtools.com/images/share-on-facebook.jpg"]

Just for fun, I’ll change the url to our Facebook page as well, so you can try this one, too:

You can take this same code snippet and embed it in any HTML document, including your email marketing newsletter and your email signature. You can even embed it in a PDF file! How’s that for magic?

Do you have any great tips for custom sharing buttons? Share them in the comments below!

February 2, 2012 / Blog

Share the Post

About the Author

Tim is digital marketing strategist and technology solutions architect at ProSocial Marketing, LLC.

Comments

No comment yet.

Leave a Reply

Your email address will not be published. Required fields are marked *

Create a Custom Facebook Share Buttons that work like Magic!