[SOLVED]FacebookLikeButton tag: how to show news item title?

frankmanl · Post by **frankmanl** » Sat Nov 02, 2013 4:03 am

Nice tag, works excellent. Thank you for this.
But is there a way to show the news item's title on Facebook, in stead of website and page title, when liking a News item?

SOLUTION: see last post, 25 Dec 2013, 16.27

Post by **velden** » Sat Nov 02, 2013 11:22 am

I don't know the FacebookLikeButton tag but I know what Facebook wants to display proper title and images: Open Graph meta tags.

If those are not present it will take title from <title> tag of the webpage and choose a (kind of) random image.

Best is to use Open Graph tags (always fail to find the understandable explanation on Facebook, but here you have a starting point: http://davidwalsh.name/facebook-meta-tags).

Other option would be to change the page template a little:

Code: Select all

example:
{capture name="defaulttitle" assign="title"}{sitename} :: {title}{/capture}
...
<__html ...>
  <head><title>{$title}</title>
...

It's important that the capture part is at TOP of template.

Now in your NEWS detail template assign the title of the news item to the $title variable (overwriting the earlier captured sitename and pagetitle)

Code: Select all

example:
{capture name="newstitle" assign="title"}{$entry->title}{/capture}

Because of the order the templates are processed (top, body, head) it should work.

To check what Facebook sees (and to refresh the cached data that Facebook stores) use the Facebook debug page:

frankmanl · Post by **frankmanl** » Tue Dec 24, 2013 4:43 am

Thank you, Velden. I haven't been able to work on this for a while, therefore my late reply.
Your suggestion for changing the title works perfectly.
I still have some issues with the images, but I'll dig into that.

frankmanl · Post by **frankmanl** » Wed Dec 25, 2013 4:56 am

I'm still struggling with images.
(I get the title right, by using Velden's suggestion for a $title variable.)

To get the right image I try to use an open graph meta tag.
In my News detail template I put this line of code

Code: Select all

{capture name="facebookphoto" assign="fbphoto"}{$entry->file_location}/{$foto1}{/capture}

and then I set page specific meta data

Code: Select all

<meta property="og:image" content="{$fbphoto}"/>

When I look at the page's source this meta property is correct, it points to the correct image.
But the Facebook like button displays another image: in some cases a second image used in the news article, in other some image used in my pages template.

I suspect the reason is the order of handling page elements

Because of the order the templates are processed (top, body, head) it should work.

Could it be that the Facebook like button is generated in the body, before the head (containing the meta tag) is processed?
How could I solve this?

examples - removed after solving this issue

Rolf · Post by **Rolf** » Wed Dec 25, 2013 5:48 am

Put the default content block outside the html tags of your template like I did here
http://docs.cmsmadesimple.org/layout/ex ... e-template
This part will be processed before the others!

frankmanl · Post by **frankmanl** » Wed Dec 25, 2013 6:24 am

This does not change the order, does it? The content (body) is still processed before the head.
The two examples are still displaying a wrong image, although other news items are correct now.
Could it be that Facebook caches images, so changes in my template have no influence on earlier 'likes'?

Post by **velden** » Wed Dec 25, 2013 8:40 am

It is important to understand how a webpage 'works'.

Facebook does not have (nor need to have) any knowledge about the CMS (if any) used to create a webpage.

Facebook is only interested in the html code it finds while crawling the url you provide. So actually you only need to have a look at the web page's source. CMSMS orders etc. are of no relevance at that point anymore.

That said; I already pointed you to the Facebook Object Debugger: https://developers.facebook.com/tools/debug
If you debug the EXACT url your using for the Like! button that debugger will give you some useful information.

For example that you did not supply a og:url nor a og:title tag which are both required. Though I don't think that's your problem.

Further, you're html does not validate completely. Again, I don't think that's causing image problem.

Facebook debug says the image is too small which of course is not true in this case. I was thinking about aspect ratio

BTW: when I manually add the url in my Facebook it shows the right picture:

(I don't want to use the like button as it will show on my wall)

frankmanl · Post by **frankmanl** » Wed Dec 25, 2013 10:26 am

@Velden
• the way FB finds info: I understand
• FB meta tags: I added more of these (which improves the result indeed), but can't find out how to do the og:url
• HTML validation: looks like that's due to News module in combination with HTML5 and to FacebookLikeButton tag - I'll further investigate, but that's not related to the issue
• I do have the impression Facebook has some kind of cache: items I liked earlier today still show old information, even after unliking them and liking them again in another browser.
solution to clear Facebook's cache: http://www.schipul.com/help-files/clear ... ache-link/

So, I think I have a solution, apart from og:url - how can I get that?

Post by **velden** » Wed Dec 25, 2013 10:46 am

frankmanl wrote:@Velden

So, I think I have a solution, apart from og:url - how can I get that?

The same way you put it in the Like button tag?

frankmanl · Post by **frankmanl** » Wed Dec 25, 2013 2:41 pm

Solved!
With the get_current_url - function plugin from the CG Extensions module.

frankmanl · Post by **frankmanl** » Wed Dec 25, 2013 3:27 pm

So, this is how I did it.
• I installed the FacebookLikeButton tag.
• I installed CG Extensions
• I changed the page template as Velden suggested in his reply (2 Nov 2013, see above; not realy needed for my problem, but still a good suggestion)

In my News detail template I did the following:
• I defined an image, a title and a description to use in Facebook:

Code: Select all

{capture name="facebookfoto" assign="fbphoto"}{$entry->file_location}/{$foto1}{/capture}
{capture name="newstitle" assign="generated_title"}{title} :: {$entry->title}{/capture}
{capture name="facebooktekst" assign="fbdescription"}{$title} - {$subtitel}{/capture}

• I defined the page’s URL (this is why CG Extensions is needed):

Code: Select all

{get_current_url assign="fb_cur_url"}

• I inserted the FacebookLikeButton tag:

Code: Select all

{FacebookLikeButton lang="nl_NL" show_faces="false" layout="button_count"}

Then I made a GCB NEWS_facebook_metatag:

Code: Select all

<meta property="og:image" content="{$fbphoto}"/>
<meta property="og:title" content="{$generated_title}"/>
<meta property="og:description" content="{$fbdescription}"/>
<meta property="og:url" content="{$fb_cur_url}"/> 
<meta property="og:site_name" content="name of the site"/>

and put that GCB in the news page’s page specific metadata.

I might have used prettier and more consistent names for my variables, but still it works.
While working on it I sometimes had to clear Facebook’s cache: http://www.schipul.com/help-files/clear ... ache-link/

Frank

becfret · Post by **becfret** » Mon Jul 14, 2014 5:02 pm

Hi, Thanks for this info, it's really helped for setting up Twitter Cards but I'm having issues with the image. When I use the suggested code the image folder shows but the image file doesn't e.g.

http://mywebsite.co.uk/folder/uploads/news/id5/

I've tried capturing the image file but nothing seems to work - I'm at a loss.

Thanks,

Becky

CMS Made Simple Forums

[SOLVED]FacebookLikeButton tag: how to show news item title?

[SOLVED]FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: FacebookLikeButton tag: how to show news item title?

Re: [SOLVED]FacebookLikeButton tag: how to show news item ti