Adding Facebook Like and Recommend Buttons
Here is how you can add Facebook “Like” and “Recommend” buttons to your gallery:
Why both? Well, I find it useful to use the “Like” to connect someone to my Facebook artist’s page (or my main page). That way, they can continue to get messages from me on their Facebook page. I use the “Recommend” to connect to the page they are looking at, the gallery itself. That entry in Facebook will quickly scroll down their Facebook Wall, and be lost.
You will be adding these buttons to the “Statement” field of your gallery. You could also put them elsewhere, but be careful. Do not put them into the “Description” field, because your page won’t look right! There is something about Facebook’s code that breaks other pages.
Here’s what the operation will look like:
Step 1: Facebook “Like” Button
For example, I decided to use “Like” to connect to my Facebook page, which is here: https://www.facebook.com/pages/David-Gross/110616302378037
I got the following code from Facebook, on this page: https://developers.facebook.com/docs/reference/plugins/like/
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=244748862233963&xfbml=1″></script><fb:like href=”https://www.facebook.com/pages/David-Gross/110616302378037” send=”false” layout=”button_count” width=”100″ show_faces=”false” font=”verdana”></fb:like>
See the bold-faced URL? That is what you need to replace with your own URL. Go to your Facebook page, copy the URL (from the top of your browser’s window), and replace the bold-face URL with your own.
Put this code into the “Statement” field of your gallery.
Step 2: Facebook “Recommend” Button
I decided to use “Recommend” to let the view recommend the page he/she is looking at. The recommendation appears on the viewer’s Facebook “wall.” You do not have to change this code at all…it will “Recommend” the page it finds itself on.
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=209517742441628&xfbml=1″></script><fb:like href=”" send=”false” layout=”button_count” width=”100″ show_faces=”false” action=”recommend” font=”verdana”></fb:like>
Step 3: Put code into the Statement field
- Go to your gallery administration, e.g. www.mygallery.com/admin.php
- Click the “Galleries” tab, and edit a gallery.
- Put both pieces of code into the the “Statement” field. Be sure to change the URL in the first chunk of code to be your Facebook page. The URL in the “href” after “fb:like” is the one to change.
- If you want some extra space between the two chunks of code, you will have to put “<br><br>” between them. That means, put the “<br><br>” in that empty line, in the example below.
