Facebook Share not working on CGBlog

[tidalstudios]

Hi
Here is my site: http://www.kateatkinsonmakeupartist.co.uk/blog.html
As you can see, each blog post has a Facebook share button at the bottom. However, when any of these buttons is clicked, the link tries to share the whole page and uses the thumbnail of the first blog post. I have looked through all the documentation but I can't figure this out: how is it possible to share just the blog post and the post's thumbnail?
I have also tried adding the CGSocial Blaster and CG Facebook Post modules (the former appears in the list of the blog posts) but again I cannot make it work successfully. I get the warning: "We do not have user, or page credentials to allow us to post to a facebook page".
Is there a simple step-by-step guide that I can follow?
Regards
Paul

[Rolf]

Can you post your summary template?

[tidalstudios]

Hi Rolf
Here it is:

<!-- Start CGBlog Display Template -->

<div id="fb-root"></div>
<__script__>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</__script>

{if isset($error)}{cgerror}{$error}{/cgerror}{/if}

{if $pagecount > 1}
<p>
{if $pagenumber > 1}
<a href="{$firsturl}">{$mod->Lang('firstpage')}</a>&nbsp;
<a href="{$prevurl}">{$mod->Lang('prevpage')}</a>&nbsp;
{/if}
{$mod->Lang('prompt_page') }&nbsp;{$pagenumber}&nbsp;{$oftext}&nbsp;{$pagecount}
{if $pagenumber < $pagecount}
&nbsp;<a href="{$nexturl}">{$mod->Lang('nextpage')}</a>
&nbsp;<a href="{$lasturl}">{$mod->Lang('lastpage')}</a>
{/if}
</p>
{/if}

{foreach from=$items item=entry}
<div class="CGBlogSummary">
<div class="CGBlogContentWrapper">

{if $entry->postdate}
<div class="CGBlogSummaryPostdate">
{$entry->postdate|cms_date_format}
</div>
{/if}

<div class="CGBlogSummaryLink">
{$entry->title|escape}
</div>

{if $entry->categories}
<div class="CGBlogSummaryCategory">
{strip}{$category_label}
{foreach from=$entry->categories item='category'}
{$category.name}&nbsp;
{/foreach}
{/strip}
</div>
{/if}

{if $entry->author}
<div class="CGBlogSummaryAuthor">
{$author_label} {$entry->author}
</div>
{/if}

{if $entry->summary}
<div class="CGBlogSummarySummary">
{* NOTE: FOR SECURITY REASONS content will not be passed through smarty before being displayed. *}
{$entry->summary}
</div>

{else if $entry->content}
<div class="CGBlogSummaryContent">

{* NOTE: FOR SECURITY REASONS content will not be passed through smarty before being displayed. *}
{$entry->content}
</div>
</div>
{/if}

{if isset($entry->extra)}
<div class="CGBlogSummaryExtra">
{* NOTE: FOR SECURITY REASONS content will not be passed through smarty before being displayed. *}
{$entry->extra}
{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue} *}
</div>
{/if}
{if isset($entry->fields)}
{foreach from=$entry->fields item='field'}
<div class="CGBlogSummaryField">
{if $field->type == 'image'}
<img src="{$entry->file_location}/{$field->value}"/>
{elseif $field->type == 'file'}
<p>{$field->name}:&nbsp;<a href="{$entry->file_location}/{$field->value}"/></p>
{else}
<p>{$field->name}:&nbsp;{$field->value}</p>
{/if}
</div>
{/foreach}
{/if}

<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>

</div>
{/foreach}<br/><br/>
<!-- End CGBlog Display Template -->

[velden]

I think you need to read about the Open Graph meta tags and then you understand that you will need to provide 'links' to individual pages per blog article.

Those pages should have the proper Open Graph meta tags setup so Facebook will read that information when sharing that specific url.

Now it's just one generic page for all articles. There is no way for Facebook to differentiate between those articles.

ps. when sharing an url on Facebook, Facebook really 'visits' the page and reads some information from the meta tags. The found information will be cached by facebook.

Debugger: https://developers.facebook.com/tools/debug/ (people say it refreshes the facebook cache too)

BTW: it is possible to use one page to share multiple articles, but you should think of your visitors; would they be happy to follow a link to a specific article and then land to a page with tens or more articles to find the proper one?

This webpage http://tinyurl.com/jy4yyay I setup. Every photo on it can be shared on Facebook. But note the urls it shares; different parameter per photo.
I use this parameter to:
a.) setup the proper Open Graph meta tags
b.) jump to the proper image when a visitor reaches the page (using javascript)

[tidalstudios]

Hi
Your comment about the multiple posts on one page is very valid and both explains why the share button is sharing the page and the first image as well as making a good observation about the user experience. If the page was showing just the single post, I presume that the share button would share just that post and its image. So my next question would be, how do I show just a single post on a page?
Regards
Paul

[velden]

One post on a page = detail action/page feature that many CMSMS modules have. Have a look at the default sample summary template that comes with CGBlog and you know what I mean (I hope).

I presume that the share button would share just that post and its image

Either way you should setup the Open Graph meta tags properly. Else FB will do a best guess and you may end up with Facebook sharing unrelated images like your logo or a background.

Further, for SEO you'd need to setup other meta tags properly too, so you probably can reuse the code anyway.

http://www.cmscanbesimple.org/blog/base ... d-metatags
Might seem difficult at first but once you understand it you'll find a solution for (almost) every 'problem'.