[SOLVED] How to add social sharing links (FB Like, Google+) for a specific URL and not the current page

How to add social sharing links (FB Like, Google+) for a specific URL and not the current page

On my website homepage I have a list of article teasers. I want to add social sharing links to the teasers. However all my attempts have resulted in the social links generating a post for the current page the user is on and not the actual page the teaser is linked to.

Any suggestions would be greatly appreciated.

Solution

Both the Facebook Like button and the Google +1 button support targeting other pages, but the techniques differ a bit.

+1 Button

Based on this snippet from the +1 button docs, you can override the default behavior of targeting the current page using either the href attribute or a rel=canonical link element in the header of your page.

The URL that is +1'd is determined by one of three things, in this order:

The button's href attribute. For example: <g:plusone href="http://example.com"></g:plusone> will target http://example.com.

The page's <link rel="canonical" ... /> tag If the +1 button's href attribute is not provided, Google will use the page's canonical URL. For more information on defining the canonical URL for a page, see this help article.

The URL provided by document.location.href

There's also a configuration tool that you may find useful.

Facebook Like Button

Based on the official documentation you can use either the href attribute or OpenGraph markup.

The href attribute works much like it does on the +1 button. Here's a like button that targets http://example.com.

<div class="fb-like" data-href="http://example.com" 
  data-send="true" data-width="450" data-show-faces="true"></div>

The OpenGraph option requires you to add a meta element to your document's header. Here's the OpenGraph element to target http://example.com:

<meta property="og:url" content="http://example.com" />