Facebook Like button: create one for Gallery 2 & fix thumbnails not appearing in facebook

battledingo
battledingo's picture

Joined: 2006-08-25
Posts: 39
Posted: Tue, 2012-04-03 01:47


Gallery version = 2.2.4 core 1.2.0.6
PHP version = 5.3.9 cgi-fcgi
Webserver = Apache
Database = mysqlt 5.1.61-log, lock.system=flock
Toolkits = Thumbnail, LinkItemToolkit, Exif, Gd, ImageMagick, NetPBM
Acceleration = none/1800, none/1800
Operating system = Linux titan.sslservers.net 2.6.18-194.26.1.el5.028stab079.2 #1 SMP Fri Dec 17 19:25:15 MSK 2010 i686
Default theme = matrix
gettext = enabled
Locale = en_US
Browser = Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0

Hi

I am using Facebook Like on my gallery and it grabs the incorrect link to the image. The viewer on facebook views the correct thumbnail but the link is to the next image in the gallery.

eg. You will see image 1 on facebook and it is linked to image 2 when you click on it.

Any ideas on how to fix this?

thanks

Here is the error message in facebook debugger:

Like Button Warnings That Should Be Fixed:

Admins And App ID Missing: fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Like Button Tag Missing: og:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Like Button Tag Missing: og:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Like Button Tag Missing: og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Open Graph Warnings That Should Be Fixed:
Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Thu, 2012-06-21 01:09
Quote:
Like Button Warnings That Should Be Fixed:

You need to fix those.
How did you add this button? Is there a G2 module? Did you follow some directions?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
battledingo
battledingo's picture

Joined: 2006-08-25
Posts: 39
Posted: Wed, 2012-07-18 23:57

Hi Dave

Thanks for your super fast reply and pointing me in the right direction. It has been a few years since I added the button & from memory I just dropped the code into a file.

I will find & fix the errors facebook mentioned.

Thanks for your help.

Cheers

:)

 
battledingo
battledingo's picture

Joined: 2006-08-25
Posts: 39
Posted: Sun, 2012-09-23 05:28

Floridave is a code legend, thanks for keeping my problem in mind after a few months. I will let you know how it goes.

Thanks to Floridave for his answer:

floridave wrote:

Quote:
Like Button Warnings That Should Be Fixed:

Your problem seem like this guy who asked about Facebook like button tag missing error.
This answer from stackoverflow might be able to help you to fix such that problem....here is the source:
http://stackoverflow.com/questions/10689677/facebook-like-button-tag-missing-error-how-do-i-fix-it
Charly

Quote from the website link:

I have facebook like on my mediawiki site and when I run it through the debugger http://developers.facebook.com/tools/debug I get the errors:

Admins And App ID Missing fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Like Button Tag Missing og:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Like Button Tag Missing og:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Like Button Tag Missing og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

It also posts it as a 'recent activity' not a post with the image. How do I solve this?
facebook facebook-like
share|improve this question

edited May 21 at 22:49
richarbernal
647418

asked May 21 at 17:21
LTech
556

59% accept rate

feedback
[b]1 Answer
active oldest votes
up vote 0 down vote

The "og:" tags must be in the head element of the HTML page that the like button refers to (usually the page the button is on). The Facebook debugger is telling you that they are not there. They should look like this:

<head>
<meta property="og:title" content="My web page title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://exmaple.com/image.jpg" />
<meta property="og:url" content="http://example.com/" />
<meta property="og:site_name" content="My site name" />
<meta property="og:description" content="This site is awesome!" />
<meta property="fb:app_id" content="YOUR_APP_ID" />
</head>

You can use EITHER the fb:app_id or fb:admins, but not both.

[/b]

 
battledingo
battledingo's picture

Joined: 2006-08-25
Posts: 39
Posted: Mon, 2012-10-01 13:22

Create a facebook like button for gallery 2

Hi

Here is how to make a facebook like button for Gallery 2 Module. I didn't do any coding just read multiple forums & got help from the legend Mr.Flori Dave. Thanks Flori Dave for your help and knowledge.

1. Add the like button:

In photo.tpl which is found at /public_html/gallery/themes/(your theme name here)/templates/

(It is safer to add a folder local to the templates folder & copy photo.tpl to it. Now edit the file from the local folder)

Somewhere around halfway down your photo.tpl file, find:

Quote:
{else}
{g->text text="There is nothing to view for this item."}
{/if}
</div>

Now pop this in below it:

Quote:
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.YOUR_SITE_URL.com{g->url arg1="view=core.ShowItem" arg2="itemId=`$theme.item.id`"} &amp;layout=standard&amp;show_faces=true&amp;layout=standard&amp;width=500&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=35&amp;appId=your_facebook_app_id" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:35px;" allowTransparency="true"></iframe>

Be sure to change

to whatever your site is, I didn't add my gallery url to the end and it works. My gallery directory is "gallery", don't know if this code would work if your gallery is located under another name...

Also chage your_facebook_app_id. To get a facebook app id see the troubleshooting notes below. It is easy to do.

You now have a like button, however there will be no thumbnail on your facebook page.

2. Add the code for the facebook page so the thumbnail appears:

In theme.tpl which is found at /public_html/gallery/themes/(your theme name here)/templates/

(It is safer to add a folder local to the templates folder & copy theme.tpl to it. Now edit the file from the local folder)

Place this code between the <head> and </head> tags, don't forget to change the "http://www.your_website_here" and register a facbook app id to get the app number (see below) :

Quote:
<meta property="og:title" content="{ $theme.item.title }" />
<meta property="og:type" content="article" />
<meta property="og:image" content='http://www.your_website_here{g->url arg1="view=core.DownloadItem"}&g2_itemId={"`$theme.item.id`"}' />
<meta property="og:url" content='http://www.your_website_here{g->url arg1="view=core.ShowItem" arg2="itemId=`$theme.item.id`"}' />
<meta property="og:site_name" content="change this to your website name" />
<meta property="og:description" content="This site is awesome!" />
<meta property="fb:app_id" content="YOUR_APP_ID" />

3. Now make the thumbnail image appear by adding the following code in modules/core/DownloadItem.inc

Under this row:

Quote:
$fileName = GalleryUtilities::getRequestVariables('fileName');

I just change the mailicous-url-checker from...

Quote:
if (!empty($fileName) && $fileName != $pseudoFileName) {

to...

Quote:
if (!empty($fileName) && $fileName != $pseudoFileName && urldecode($fileName) != $pseudoFileName) {

You now should have a working like button for gallery 2.

Here are me sources:

1. Adding the like button: http://gallery.menalto.com/node/95707 (credits to cozbaldwin)
I modified the code slightly taken from the facebook like button code generator (http://developers.facebook.com/docs/reference/plugins/like/).

2. Adding the meta properties:

http://stackoverflow.com/questions/10689677/facebook-like-button-tag-missing-error-how-do-i-fix-it
http://gallery.menalto.com/node/95707 (credits to varun7pathak)

3. Help facebook recognise the url links (credits to Tornevall):

http://gallery.menalto.com/node/96164#comment-359843


Troubleshooting:

If you can't see the thumbnail image on facebook delete your browser cache or try another browser when you press the like button.

To create a app id number:

1.Login to Facebook

2. Go to Facebook Developers Application page https://developers.facebook.com/apps

3. From all those unsuccessful trials, choose one app that you set up for a target before

4. Within the description, you will find APP ID

This debugger is your best friend:

http://developers.facebook.com/tools/debug

(Copy & paste your URL containing the like button into the address bar and fix any error messages by editing the theme.tpl file (found in section 2.)

Learn how to code the metadata: http://ogp.me/

:) happy coding