Change AddThis Facebook Description and Title

This is a super cheesy hack, but nonetheless, it got me through an website build.

So, as I’m sure you’ve read, using addthis.com api custom descriptions and title does not work with Facebook.  Facebook insists on scanning your page for it’s own content and description.

Lucky for us, we can specify what URL is scans.

Using the information found here: http://developers.facebook.com/docs/share we can see that we can pass our own link to facebook.  So that’s exactly what we’ll do.

Let’s look at our AddThis code

<div id="add_this">
<div>
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c22c53745c89a46"><img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a>
<a><img src="/images/social_email.png" title="Email Us"/></a>
<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.allebrum.com%2Fsharefacebook.html&t=Share%20This" target="_blank"><img style="margin:0 3px 0 2px;" src="/images/social_facebook.png" title="Like Us On Facebook"  /></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c22c1bc64ddaee6"></script>
</div>

You’ll want to make your own code on the addthis.com website.
Then you can make modifications to it like we did. Take a look at the facebook url. We added in the href=”” line.
the u= specifies the url that you want to share. You’ll have to make sure that it is an encoded url like you see above.
Now, sharefacebook.html is not the page that I really want to share at all. It’s just a dummy page that facebook can scan and get the information that I actually want it to have.
Let’s take a look at sharefacebook.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Allebrum!" />
<meta name="description" content="Allebrum's cool new Content Management system to have first release soon!" />
<title>Untitled Document</title>
</head>

<body>
<script>
document.location.href = "http://www.allebrum.com/";
</script>
</body>
</html>

Notice the two title and description meta tags. That is where you will specify your custom Title and Description that will show up on Facebook.
Facebook will scan this page.
You’ll want to replace this line: document.location.href = “http://www.allebrum.com/&#8221;; with a url that goes to the actual page you want your users to see when they click on the facebook shared link.

Advertisements

2 Comments (+add yours?)

  1. aftonbladet
    May 07, 2013 @ 13:25:15

    I am really impressed with your writing abilities as smartly as with the format to your blog.

    Is this a paid topic or did you modify it your self?
    Either way keep up the nice quality writing, it’s uncommon to peer a great weblog like this one these days..

  2. Konstantin Zimin
    May 09, 2013 @ 08:39:10

    Not so perfect solution for custom share button.
    Please see this – http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: