Share on facebook

What happens when I “attach” a link?

Facebook does the following:

  • It pulls in the title (linked to the original page: the link is direct but has a “nofollow” attribute),
  • Shows the destination domain;
  • Generates the text snippet,
  • Suggests a thumbnail image which it places adjacent to your Page’s link.

How to Setup a “Share on Facebook” Link or Bookmark

The actual hyperlink for sharing a webpage on Facebook, or put differently, when you post a webpage on your Facebook profile, is really simple. You would just add the following html code to your webpage (it’s just a hyperlink).

<a target="_blank" href="http://www.facebook.com/sharer.php?u= http://www.grafix.gr" title="Share this webpage on Facebook">Share this on facebook</a>
  • This will launch a new browser window, which I highly recommend, rather than lead your visitor away from your website.
  • The u= http://www.grafix.gr is the URL of the page that the “Share on Facebook” link is on. You do have to use the full URL here.
  • The title=”Share this webpage on Facebook” is the text that displays when you hover your mouse over the link.
  • The Share on Facebook is the text of the link, otherwise known as the Anchor text. You can use an image if you like here.

How to Customize the Image that Facebook uses

In the example at the top of the article, Facebook didn’t even display an image, and instead gave the visitor the option of choosing an image that was displayed on the original webpage. This is probably undesirable, and can be customized with an image of your choosing, and that image doesn’t even have to be on your website, you can use an image on another website if you wish.

Here’s an example of how you can specify the image that Facebook uses, add the following html code to your webpage, ideally in the HEAD section, but if you can’t manage that (for example with WordPress or Joomla where you don’t have that much control) it can live in the BODY section.

<link rel="image_src" href="http://garethhooper.com/images/stories/articles/social_media/integration/facebook_post.jpg" />

Things to notice

  • The steps above will not work if you test them locally using wamp server (because it doesn’t have http://). You must test them online.
  • When I was testing all the above information, I noticed that Facebook “appeared” to use some kind of cache. I would update my test page and then test the link and nothing changed. It was only when I changed the title of the page and noticed that Facebook still used the old title, did I suspect that there was some kind of caching going on. Clearing the temporary internet files and using a different browser didn’t help, I got the same result. It was only when I tried the link after 30 mins did I see the changes I made reflected on Facebook. It may be much less than 30 mins of cache, I didn’t try and time it. Just something to bear in mind. For testing purposes, you can add ?v=1 at the end of the url. Any number can be used in place of 1.
  • The images on the page must be publicly accessible to the Facebook crawler. If for example, they are inside a password protected folder, it will not work.
  • You can use the facebook debugger to see what the url page sends to facebook.

Learning Resources

  • Visit this link.
  • Breaking facebook’s share cache article.

Post A Comment

Anti-Spam Quiz: