[MOD] Facebook like/share/send buttonVersion 3.1Demo My website
http://www.budduke.com/gallerybased off of jeyjoo's modifications that was posted in the programming section of this site
versions history
1.0 initial version
1.1 fixed error in Header file insert pointed out by Jeyjoo in reply#2. Changed insert in header.html
1.2 fixed error when you had html code in your description field on your images. Changed insert for details.html
2.0 reworked the code so I think it will work correctly this time
2.1 Added Iframe for the like button for sites that need it.
3.0 reworked code to work with appid from facebook application
3.1 made this mod work better with version 2 of my facebook login mod
I have been reading everyone's attempts/problems regarding this and this is what I came up with...
Version 2.0 now works with your categorie thumbnail pages
Version 3.0 now has a main like button for your site.
Please read my post on how to create an application on facebook and other issueshttp://www.4homepages.de/forum/index.php?topic=29422.msg157086#msg157086You Must Create an Application on Facebook for this Mod to workYou only need to modify these files to make this work
your templates/header.html
your templates/details.html
your templates/thumbnail_bit.html New to version 2.0
includes/page_header.php New to version 2.0
includes/functions.php New to version 2.0
admin/settings.php New to Version 3.0
lang/english/admin.php New to Version 3.0
lang/english/main.php Optional New to Version 3.0
details.php (Mod no longer using this file, need to remove mod from this file if you have older version of this mod installedLike always, Backup these files and Database before you beginNew for version 3.0Step 0you will need to download the attached file, unzip it, place the file in your root folder of your gallery, and run the installer file so it can place the fields in your settings database.
Delete this file after you run it.
Step 1in
your includes/page_header.php file
Updated for version 3search for
?>
insert
Before//[MOD] Facebook Like Button
if ($array["details"]){
$sql = "SELECT image_name, cat_id, image_thumb_file, image_description
FROM ".IMAGES_TABLE."
WHERE image_id = $image_id AND image_active = 1";
$image_row = $site_db->query_firstrow($sql);
$facebook['image'] = get_file_path($image_row['image_thumb_file'], "thumb", $image_row['cat_id'], 0, 1);
$facebook['image'] = $script_url.substr($facebook['image'],1);
$facebook['title'] = $image_row['image_name'];
$facebook['type'] = "article";//this is what facebook says images should be filed under
$facebook['description'] = !empty($image_row['image_description']) ? strip_tags($image_row['image_description']) . ". " : "";
$facebook['url1'] = $site_sess->url($script_url."/".$self_url);
if (strpos($facebook['url1'],"&")){
$facebook['url1']=substr($facebook['url1'],0,strpos($facebook['url1'],"&"));
}
}
else{
$facebook['image'] = $config['fb_image'];
$facebook['title'] = $config['fb_title'];
$facebook['type'] = "website";// types setting for your default website
$facebook['description'] = strip_tags($config['fb_description']);
$facebook['url1'] = $config['fb_main_url'];
}
$facebook['main_url']= $config['fb_main_url'];
$site_template->register_vars(array(
"fb_title" => $facebook['title'],
"fb_image" => $facebook['image'],
"fb_type" => $facebook['type'],
"fb_desc" => $facebook['description'],
"fb_url1" => $facebook['url1'],
"fb_main_url" => $facebook['main_url'],
"fb_appid" => $config['fb_appid'],
"fb_admins" => $config['fb_admins'],
"fb_language" => ($lang['fb_language']) ? $lang['fb_language'] : $config['fb_language']
)
);
unset($facebook, $image_row);
//END [MOD] Facebook Like Button
Step 2.a (this insert is the same as my facebook login MOD V2 step 9.a)
in
your templates/header.html file
search for
<html dir="{direction}">
Replace with
<html dir="{direction}" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Step 2.b New to version 2.0, Updated for version 3search for
<title>.....</title>
insert
After<script src="http://connect.facebook.net/{fb_language}/all.js#xfbml=1"></script>
<meta property="fb:app_id" content="{fb_appid}"/>
<meta property="fb:admins" content="{fb_admins}"/>
<meta property="og:type" content="{fb_type}"/>
<meta property="og:site_name" content="{site_name}"/>
<meta property="og:url" content="{fb_url1}"/>
<meta property="og:title" content="{fb_title}"/>
<meta property="og:description" content="{fb_desc}"/>
<meta property="og:image" content="{fb_image}"/>
Step 2.c Optional New to version 2.0, Upated for version 3Updated for version 3.1(this insert is the same ans my facebook login mod version 2 step 9.b)
Note: You do not have to place this code in your page.
Note: I have noticed the site loads faster with this code placed in it.
Note: I have noticed a flicker when some sites load with this code placed in them (That is why I am giving you the option)
Insert at the very end of the document
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '{fb_appid}',
cookie: true,
xfbml: true
});
FB.Event.subscribe('auth.logout', function(response) {
window.location = '{fb_logout_url}';
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/{fb_language}/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Remove<script src="http://connect.facebook.net/{fb_language}/all.js#xfbml=1"></script>
from the code you placed in Step 2.b
Step 3.a New to version 2.0in your
includes/functions.php file
Search for
global $self_url, $site_template, $site_sess, $user_info, $config, $cat_cache, $lang, $additional_image_fields, $user_table_fields, $url_show_profile;
Replace with
global $self_url, $site_template, $site_sess, $user_info, $config, $cat_cache, $lang, $additional_image_fields, $user_table_fields, $url_show_profile, $script_url;//[MOD] Facebook Like Button
Step 3.b New to version 2.0Search for
$rate_form = ""
insert
Before //[MOD] Facebook Like Button
$fb_url= $site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_row['image_id']);
$fb_url= $script_url.substr($fb_url,1);
if (strpos($fb_url,"&")){
$fb_url= substr($fb_url,0,strpos($fb_url,"&"));
}
$site_template->register_vars("fb_url",$fb_url);
//end [MOD] Facebook Like Button
Step 4 Changed in version 2.0In your
templates/details.html and
templates/thumbnail_bit.html file
Place this code where you want the like button to appear
<fb:like href="{fb_url}" layout="button_count" show_faces="false" width ="90"></fb:like>
Or if you prefer or you site needs the IFRAME version of facebook's like button insert this code instead...<iframe src="http://www.facebook.com/plugins/like.php?href={fb_url}&layout=button_count&show_faces=false&width=90&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
Step 5.a New to version 3.0(this insert is the same as my facebook login MOD V2 step 1.a)
In your
admin/settings.php file
Search for
// end of functions
Insert
Before//[MOD] Facebook Like Button
function show_fb_language_options($setting_name, $setting_value) {
global $fb_language_optionlist;
echo "<select name=\"setting_item[".$setting_name."]\">";
foreach ($fb_language_optionlist as $key => $val) {
echo "<option value=\"$key\"";
if ($setting_value == $key) {
echo " selected=\"selected\"";
}
echo ">".$val."</option>";
}
echo "</select>";
}
//END [MOD] Facebook Like Button
Step 5.b New to version 3Updated in version 3.1(this insert is the same as my facebook login MOD V2 step 1.b)
Search for
show_form_footer($lang['save_changes'], "", 2);
Insert
Before// [MOD] Facebook
show_table_separator($setting_group["facebook"], 2, "setting_group_facebook");
show_setting_row("fb_appid");
if ($fb_mod_select==1 || $fb_mod_select==3){
show_setting_row("fb_appsec");
}
if ($fb_mod_select>1){
show_setting_row("fb_admins");
show_setting_row("fb_title");
show_setting_row("fb_main_url");
show_setting_row("fb_image");
show_setting_row("fb_description","textarea");
}
show_setting_row("fb_language","show_fb_language_options");
// END[MOD] Facebook
Step 6 New to version 3.0Updated for version 3.1(this insert is the same as my facebook login V2 step 5)
Note: first line $fb_mod_select=2 (change to 3 if using both mods)In your
\lang\english\admin.php file
Search for
?>
Insert
Before//[MOD] Facebook
$fb_mod_select=2; // 1="login button Mod", 2="like/share/send button Mod", 3="both Mods installed"
/*-- Setting-Group Facebook --*/
$setting_group["facebook"]="Facebook settings";
$setting['fb_appid'] = "Application ID";
$setting['fb_appsec'] = "Application Secret";
$setting['fb_admins'] = "List of facebook IDs as admins<br><span class=\"smalltext\">IDs seperated by commas</span>";
$setting['fb_main_url'] = "Full HTML path to your website<br><span class=\"smalltext\">What you placed in the connect URL on facebook</span>";
$setting['fb_image'] = "Full HTML path to your logo/image for your website";
$setting['fb_title'] = "What you would like the Main Title to say for your website";
$setting['fb_description'] = "Description displayed for your website<br><span class=\"smalltext\">HTML code will be removed</span>";
$setting['fb_language'] = "Default language to use for Facebook";
$fb_language_optionlist = array(
'ca_ES' => 'Catalan',
'cs_CZ' => 'Czech',
'cy_GB' => 'Welsh',
'da_DK' => 'Danish',
'de_DE' => 'German',
'eu_ES' => 'Basque',
'en_PI' => 'English (Pirate)',
'en_UD' => 'English (Upside Down)',
'ck_US' => 'Cherokee',
'en_US' => 'English (US)',
'es_LA' => 'Spanish',
'es_CL' => 'Spanish (Chile)',
'es_CO' => 'Spanish (Colombia)',
'es_ES' => 'Spanish (Spain)',
'es_MX' => 'Spanish (Mexico)',
'es_VE' => 'Spanish (Venezuela)',
'fb_FI' => 'Finnish (test)',
'fi_FI' => 'Finnish',
'fr_FR' => 'French (France)',
'gl_ES' => 'Galician',
'hu_HU' => 'Hungarian',
'it_IT' => 'Italian',
'ja_JP' => 'Japanese',
'ko_KR' => 'Korean',
'nb_NO' => 'Norwegian (bokmal)',
'nn_NO' => 'Norwegian (nynorsk)',
'nl_NL' => 'Dutch',
'pl_PL' => 'Polish',
'pt_BR' => 'Portuguese (Brazil)',
'pt_PT' => 'Portuguese (Portugal)',
'ro_RO' => 'Romanian',
'ru_RU' => 'Russian',
'sk_SK' => 'Slovak',
'sl_SI' => 'Slovenian',
'sv_SE' => 'Swedish',
'th_TH' => 'Thai',
'tr_TR' => 'Turkish',
'ku_TR' => 'Kurdish',
'zh_CN' => 'Simplified Chinese (China)',
'zh_HK' => 'Traditional Chinese (Hong Kong)',
'zh_TW' => 'Traditional Chinese (Taiwan)',
'fb_LT' => 'Leet Speak',
'af_ZA' => 'Afrikaans',
'sq_AL' => 'Albanian',
'hy_AM' => 'Armenian',
'az_AZ' => 'Azeri',
'be_BY' => 'Belarusian',
'bn_IN' => 'Bengali',
'bs_BA' => 'Bosnian',
'bg_BG' => 'Bulgarian',
'hr_HR' => 'Croatian',
'nl_BE' => 'Dutch (België)',
'en_GB' => 'English (UK)',
'eo_EO' => 'Esperanto',
'et_EE' => 'Estonian',
'fo_FO' => 'Faroese',
'fr_CA' => 'French (Canada)',
'ka_GE' => 'Georgian',
'el_GR' => 'Greek',
'gu_IN' => 'Gujarati',
'hi_IN' => 'Hindi',
'is_IS' => 'Icelandic',
'id_ID' => 'Indonesian',
'ga_IE' => 'Irish',
'jv_ID' => 'Javanese',
'kn_IN' => 'Kannada',
'kk_KZ' => 'Kazakh',
'la_VA' => 'Latin',
'lv_LV' => 'Latvian',
'li_NL' => 'Limburgish',
'lt_LT' => 'Lithuanian',
'mk_MK' => 'Macedonian',
'mg_MG' => 'Malagasy',
'ms_MY' => 'Malay',
'mt_MT' => 'Maltese',
'mr_IN' => 'Marathi',
'mn_MN' => 'Mongolian',
'ne_NP' => 'Nepali',
'pa_IN' => 'Punjabi',
'rm_CH' => 'Romansh',
'sa_IN' => 'Sanskrit',
'sr_RS' => 'Serbian',
'so_SO' => 'Somali',
'sw_KE' => 'Swahili',
'tl_PH' => 'Filipino',
'ta_IN' => 'Tamil',
'tt_RU' => 'Tatar',
'te_IN' => 'Telugu',
'ml_IN' => 'Malayalam',
'uk_UA' => 'Ukrainian',
'uz_UZ' => 'Uzbek',
'vi_VN' => 'Vietnamese',
'xh_ZA' => 'Xhosa',
'zu_ZA' => 'Zulu',
'km_KH' => 'Khmer',
'tg_TJ' => 'Tajik',
'ar_AR' => 'Arabic',
'he_IL' => 'Hebrew',
'ur_PK' => 'Urdu',
'fa_IR' => 'Persian',
'sy_SY' => 'Syriac',
'yi_DE' => 'Yiddish',
'gn_PY' => 'Guaraní',
'qu_PE' => 'Quechua',
'ay_BO' => 'Aymara',
'se_NO' => 'Northern Sámi',
'ps_AF' => 'Pashto',
'tl_ST' => 'Klingon'
);
//END [MOD] Facebook
Step 7 Optional New to Version 3.0In your template files, you can now add a main like button for your site
<fb:like href="{fb_main_url}" layout="button_count" show_faces="false" width ="90"></fb:like>
Or if you prefer or you site needs the IFRAME version of facebook's like button insert this code instead...<iframe src="http://www.facebook.com/plugins/like.php?href={fb_main_url}&layout=button_count&show_faces=false&width=90&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
Step 8 Optional New to Version 3.0In your
/lang/whatever language/main.php file
Search for
?>
Insert
Before//[MOD] Facebook Like Button
$lang['fb_language'] = "en_US";
//END [MOD] Facebook Like Button
By placing the correct information for the language in your different language folders, when a user is using that language, the Like button will appear in the correct language. You can look at the array placed in step 6 for the correct format for entering the different languages
And you are finished...
New to Version 3.0You now have a place in the ACP panel, under settings to place your facebook information so you do not have to edit your code all the time.
The app id is the one from the application you created in facebook,
Admins are facebook users you want to be admins for your pages,
The rest are fields for you to fill out for the main url link for your site used in step 7.
NOTES:By placing the meta tags in the header like Jeyjoo sugested, the mod now passes validation tests
The slowness you see in the like buttons appearing is facebook querying your pages to get the meta data before it displays the info. At this point, I can not find a way around this. I also noticed that when my categorie pages where loading, I had 40 guest hits from facebook for updating the like buttons. This may cause a problem with shared hosting. But after facebook caches your pages the hits should go down.
What about the Share button?Facebook is no longer improving on the share button but they will continue to allow it to be used...
Here is the link for the steps you need to do to change it to the Share button
http://www.4homepages.de/forum/index.php?topic=29422.msg156985#msg156985Send button?Just came out, it allows you to send the link to just a couple of users or group and not posting on your profile...
You can still change the code in step #4 or add a new button with Send by
changing
<fb:like
to
<fb:send
and
</fb:like>
to
</fb:send>
Or you can add the send function to the like button (like my site is displaying) that only makes one call to facebook for the one button by changing step 4 to
<fb:like href="{fb_url}" layout="button_count" show_faces="false" send="true" width ="90"></fb:like>
Or if you prefer or you site needs the IFRAME version of facebook's like button with send button...<iframe src="http://www.facebook.com/plugins/like.php?href={fb_url}&layout=button_count&show_faces=false&width=90&action=like&font&colorscheme=light&send=true&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
I hope this helps!
These items need to be removed if you have version 1 of this mod installed...In your
details.php file
REMOVE//MOD facebook like/share
$fb_url = $site_sess->url($script_url."/".$self_url);
$facebook_image = get_file_path($image_row['image_media_file'], "thumb", $cat_id, 0, 1);
$facebook_image = $script_url.substr($facebook_image,1);
if (strpos($fb_url,"&")){
$fb_url=substr($fb_url,0,strpos($fb_url,"&"));
}
$site_template->register_vars(array(
"facebook_title" => $image_name,//change this to what you want the title to be (image_name by default)
"facebook_image" => $facebook_image,
"fb_url" => $fb_url)
);
unset($fb_url, $facebook_image);
//END MOD facebook like/share
in
your templates/details.html file
REMOVE<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="{fb_url}" layout="button_count" show_faces="true" width ="40">
<meta property="og:url" content="{fb_url}"/>
<meta property="og:title" content="{facebook_title}"/>
<meta property="og:description" content="{detail_meta_description}"/>
<meta property="og:image" content="{facebook_image}" />
<meta property="og:type" content="company" />
<meta property="fb:admins" content="LIST OF FACEBOOK ADMIN IDS" />
</fb:like>