Phoca Facebook Comments including custom Picture?

lolomat · Post by **lolomat** » 13 Apr 2011, 21:38

Hello,

i wanna use Phoca Facebook Comments with Garys CookBook.
How can i customize this module so it will show the picture at Facebook?

Thx

Post by **Jan** » 17 Apr 2011, 13:41

Hi, I don't have any information about the possibility to display images by comments application in facebook.

Jan

cholzsch · Post by **cholzsch** » 19 Apr 2011, 13:32

If the fb:comments coding would be recoded to be a Like Button (fb:like) http://developers.facebook.com/docs/ref ... gins/like/ then a picture would appear. It would involve coding meta tags to be written in the head using the Open Graph protocal. http://developers.facebook.com/docs/opengraph/

I would love for Phoca Gallery to be updated to use Like instead of Comments. A picture (since this IS a photo gallery) on your Facebook wall draws more people to your website.

Here is a sample page I put up:
http://lha4.org/fblike.html

the sample code:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>Facebook Test Post</title>

        <meta property="og:title" content="Title of Gallery"/>
        <meta property="og:type" content="article"/>
        <meta property="og:url" content="http://lha4.org/fblike.html"/>
        <meta property="og:image" content="http://lha4.org/images/phocagallery/thumbs/phoca_thumb_l_pg293836959400.jpg"/>
        <meta property="og:site_name" content="USS Nassau Crewmembers Association"/>
        <meta property="og:description" content="An Image From The USS Nassau Crewmembers Association Website"/>
        <meta property="fb:admins" content="1252543570"/>
    </head>

    <body>
        <img src="http://lha4.org/images/phocagallery/thumbs/phoca_thumb_l_pg293836959400.jpg"></img>
        <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
        <fb:like></fb:like>
    </body>
 </html>

You'll see when you "like" the image, you are then allowed to post a comment.

So, the xmlns declarations would have to be added manually to the template code, then when the user clicks on the Facebook icon on a thumbnail, or in detail view, the proper meta property tags need to be created and inserted into the head of the page.

cholzsch · Post by **cholzsch** » 20 Apr 2011, 15:54

OK...for those of you that want a thumbnail of the image to appear in the Facebook wall post:

Edit your template's index:

After DOCTYPE, your html xmlns tag should read like this:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"
 xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Now, open /components/com_phocagallery/views/comment/view.html.php

Find:

Code: Select all

// ASIGN
$this->assignRef( 'tmpl', $tmpl );
$this->assignRef( 'commentitem',$commentItem);
parent::display($tpl);

After, Add:

Code: Select all

// ADD FACEBOOK META PROPERTIES
$document->addCustomTag('<meta property="og:image" content="http://'.$_SERVER['HTTP_HOST'].'/'.$item->linkthumbnailpath.'"/>');
$document->addCustomTag('<meta property="og:type" content="article"/>');
$document->addCustomTag('<meta property="fb:app_id" content="'.$tmpl['fb_comment_app_id'].'"/>');

Post by **Jan** » 21 Apr 2011, 22:23

Hi, thank you for this guide, anyway what is: http://ogp.me/ns ?

Jan

cholzsch · Post by **cholzsch** » 22 Apr 2011, 02:26

Jan wrote:Hi, thank you for this guide, anyway what is: http://ogp.me/ns ?

Jan

Jan, you can get more detail here, and a bit more here.

Post by **Jan** » 25 Apr 2011, 15:04

Thank you, Jan

rkm1 · Post by **rkm1** » 23 Oct 2011, 19:12

this thread was very useful. although its old, i just want add a small correction in case someone else finds it...

i had to use JURI::base() for the og:image meta tag instead of variable mentioned above. I think the following is probably a more robust way of getting the url of the thumbnail for the facebook feed post:

Code: Select all

 $document->addCustomTag('<meta property="og:image" content="'.JURI::base().$item->linkthumbnailpath.'"/>');

Post by **Jan** » 17 Nov 2011, 19:04

Hi, this can be done with:
Phoca Open Graph Plugin
https://www.phoca.cz/phoca-open-graph-plugin

Jan

aussiemike · Post by **aussiemike** » 27 Feb 2012, 19:06

I tried the opengraph plugin but couldn't get it to work. The code change above did work. I must not know enough about opengraph?

Mike

Phoca Forum

Phoca Facebook Comments including custom Picture?

Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?

Re: Phoca Facebook Comments including custom Picture?