Advance Facebook Like button with OpenGraph (For Each Post)

[PLAYBOY]

Some of my members say buttons mess up their view in the forum/messages. I think they use IE8 or maybe IE7.
I think moving the butons to the right corner of signature area would solve this problem. How can i do that?

Actually you know what would solve almost all of my problems? Putting an option for each member in their profile to enable/disable the buttons

[Ricky.]

It works fine in IE6 even. I have tested it.
Looks like some post content conflict .

Care to ask them what layout issue they are facing..

Anyways, you can show it sig area.. like, find following in your Display.template.php  , I am assuming you have mod already installed..

Code Select Expand

//Advance fb like with opengraph
if(!empty($modSettings['e_fb_enable']) && !empty($modSettings['e_fb_topic'])) {
if ($message['id'] == $context['first_message'])
echo '<div style="float:right;margin:5px">
<fb:like href="',$scripturl ,'?topic=',$context['current_topic'],'.0" send="true" width="300" show_faces="true" font=""></fb:like>
</div>';
elseif (!empty($modSettings['e_fb_post']))
echo '<div style="float:right;margin:5px">
<fb:like href="',$message['href'],'" send="true" width="300" show_faces="true" font=""></fb:like>
</div>';
}//Advance Fb like with OG

Cut it from there and paste it just before following :

Code Select Expand

// Show the member's signature?

Let me know if this position is good !

[zebono2]

i cant find
      // Show the member's signature?
or
      // the upshrink image, right-floated

index.template.php

Code Select Expand


<?php
/**
 * Simple Machines Forum (SMF)
 *
 * @package SMF
 * @author Simple Machines
 * @copyright 2011 Simple Machines
 * @license http://www.simplemachines.org/about/smf/license.php BSD
 *
 * @version 2.0
 */

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context, $settings, $options, $txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as opposed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = true;

/* Does this theme use the strict doctype? */
$settings['strict_doctype'] = false;

/* Does this theme use post previews on the message index? */
$settings['message_index_preview'] = false;

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = false;
}

// The main sub template above the content.
function template_html_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>';

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

// Some browsers need an extra stylesheet due to bugs/compatibility issues.
foreach (array('ie7', 'ie6', 'webkit') as $cssfix)
if ($context['browser']['is_' . $cssfix])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/', $cssfix, '.css" />';

// RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_default_theme_url = "', $settings['default_theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
var smf_scripturl = "', $scripturl, '";
var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
var smf_charset = "', $context['character_set'], '";', $context['show_pm_popup'] ? '
var fPmPopup = function ()
{
if (confirm("' . $txt['show_personal_messages'] . '"))
window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
}
addLoadEvent(fPmPopup);' : '', '
var ajax_notification_text = "', $txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>';

echo '
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title_html_safe'], '" />', !empty($context['meta_keywords']) ? '
<meta name="keywords" content="' . $context['meta_keywords'] . '" />' : '', '
<title>', $context['page_title_html_safe'], '</title>';

// Bad Behavior Start
if (function_exists('bb2_insert_head')) {
  bb2_insert_head();
}
// Bad Behavior End
// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />';

// Present a canonical url for search engines to prevent duplicate content in their indices.
if (!empty($context['canonical_url']))
echo '
<link rel="canonical" href="', $context['canonical_url'], '" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="', $scripturl, '?action=help" />
<link rel="search" href="', $scripturl, '?action=search" />
<link rel="contents" href="', $scripturl, '" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']))
echo '
<link rel="alternate" type="application/rss+xml" title="', $context['forum_name_html_safe'], ' - ', $txt['rss'], '" href="', $scripturl, '?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="', $scripturl, '?board=', $context['current_board'], '.0" />';

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
</head>
<body>';
}

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
 <div id="header">
  <div id="lft-head">
 <div id="rit-head">
  <div id="userarea" class="smalltext">';
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
  echo '
<div id="my-avatar" class="clearfix">', $context['user']['avatar']['image'], '</div>';
 echo '
 <ul class="reset">
 <li><b>', $txt['hello_member'], ' ', $context['user']['name'], '</b></li>';
  echo '
 <li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
 <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>
  <li>', $context['current_time'],'</li>
 </ul>';
 }

// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo sprintf($txt['welcome_guest'], $txt['guest_title']);
echo '
  <script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
  <form action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" style="margin: 4px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<input type="text" name="user" class="userlog"  size="10" />
<input type="password" name="passwrd" class="userlog"  size="10" />
<input type="submit" value="', $txt['login'], '" class="button_submit" />
<input type="hidden" name="hash_passwrd" value="" />
</form>', $context['current_time'],'<br />';
  }
  echo '
  </div>';

  // Show a random news item? (or you could pick one from news_lines...)
  if (!empty($settings['enable_news']))
  {
 echo '<div id="news">
<br /><b>', $txt['news'], ':</b> ', $context['random_news_line'], '</div>';
  }
echo '
 <div id="logo">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
 </div>';
 echo '
 </div>
  </div>
</div>
  <div id="navibar">
  ',template_menu(),'
 </div>
<div id="bodybg">';
 theme_linktree();
}

function template_body_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
  </div>';

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footerarea">
 <div id="footer_section">
  <div class="frame">
<ul class="reset">
<li class="copyright">', theme_copyright(), '</li>
<li><strong>MyTheme</strong> by, <a href="http://www.traxsdownload.com/" target="_blank" class="new_win" title=""><span>Trax</span></a></li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="', $txt['valid_xhtml'], '"><span>', $txt['xhtml'], '</span></a></li>
', !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<li><a id="button_rss" href="' . $scripturl . '?action=.xml;type=rss" class="new_win"><span>' . $txt['rss'] . '</span></a></li>' : '', '
<li class="last"><a id="button_wap2" href="', $scripturl , '?wap2" class="new_win"><span>', $txt['wap2'], '</span></a></li>
</ul>';

if ($modSettings['badbehavior_display_stats']) {
if (!function_exists('bb2_insert_stats')) {
global $sourcedir;
require_once($sourcedir . '/bad-behavior/BadBehavior-SMF.php'); }

  bb2_insert_stats(); 
}
// Show the load time?
if ($context['show_load_time'])
echo '
<p>', $txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</p>';

echo '
   </div>
</div>
 </div>';
}

function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</div>
</body></html>';
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

// Reverse the linktree in right to left mode.
if ($context['right_to_left'])
$context['linktree'] = array_reverse($context['linktree'], true);

echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
$i = 1;
$count = count($context['linktree']);
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';

// Don't show a separator for the last one (RTL mode)
if ($link_num != count($context['linktree']) - 1 && $context['right_to_left'])
echo '«&nbsp;';

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

if($count == $i)
echo'<h1 style="font-size: 1em; display: inline;">';

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] .'</span>';

if($count == $i)
echo'</span>';
$i++;

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1 && !$context['right_to_left'])
echo '&nbsp;»';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="topnav">
<ul>';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', '" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>', $button['title'], '</a>';

if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</a>';

// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>', $grandchildbutton['title'], '</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
</div>';
}

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $strip_options = array())
{
global $settings, $context, $txt, $scripturl;

if (!is_array($strip_options))
$strip_options = array();

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '<a ' . (isset($value['active']) ? 'class="active" ' : '') . 'href="' . $value['url'] . '" ' . (isset($value['custom']) ? $value['custom'] : '') . '><span>' . $txt[$value['text']] . '</span></a>';
}

// No buttons? No button strip either.
if (empty($buttons))
return;

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);

echo '
<div class="buttonlist', !empty($direction) ? ' align_' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>
<li>', implode('</li><li>', $buttons), '</li>
</ul>
</div>';
}

?>


where do i put the code

Code Select Expand


if(!empty($modSettings['e_fb_enable']) && $context['current_action'] != 'admin'){
// Advance FB like with OG
echo '<span style="float: right; margin-top: 10px;"><div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: \'',(empty($modSettings['e_fb_appId'])?'your app id':$modSettings['e_fb_appId']),'\', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement(\'script\'); e.async = true;
    e.src = document.location.protocol +
      \'//connect.facebook.net/en_US/all.js\';
    document.getElementById(\'fb-root\').appendChild(e);
  }());
</script>
<fb:like send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like></span>';
} // Advance FB like with OG



[PLAYBOY]

Thanks Ricky. Layout issues has been solved once the buttons moved to signature area.

[Ricky.]

zebono2,
That code has to be there in header section of your index.template.php , it will work in 70% as generally are based off curve..

Whats your theme ?

[PLAYBOY]

Im desperately in need of adding an option for members to disable these buttons. Please somebody help me about it.

I really dont want to uninstall this mod just because few of my VIP members are having layout issues. (I dont even know what kind of issues exactly because they are very old people and they know nothing about computers. They cant even send a screenshot for me to understand the issue.)

[Ricky.]

Adding option for each member will need significant change.
Well, better is to see those member's past few post and see if it is actually causing any issue, also try to open your forum in older browser like IE6 / IE 7  to check if its something related to browser. Or else we can try some new location. I am not short in ideas !

[PLAYBOY]

How about putting an option for membergroup permissions? Would that be hard to do? Because at least i can disable it for those people.

Also we can try to put the buttons right under the member info on the left side panel.

[Ricky.]

Ya, for membergroup, that won't be that hard but can't do any soon however,

For now , you can put all that code befpre <span class="botslice">

I have not check the location but should work good at that place.. also, I have another position if you want..try this.. first !

[PLAYBOY]

For now , you can put all that code befpre <span class="botslice">

I cant find this code in index.template.php

[Ricky.]

Its in Display.template.php

[PLAYBOY]

But there are many of this code in display.template.php <span class="botslice">
Plus which code i should put before it?

[Ricky.]

You have to put this code :

Code Select Expand

//Advance fb like with opengraph
if(!empty($modSettings['e_fb_enable']) && !empty($modSettings['e_fb_topic'])) {
if ($message['id'] == $context['first_message'])
echo '<div style="float:right;margin:5px">
<fb:like href="',$scripturl ,'?topic=',$context['current_topic'],'.0" send="true" width="300" show_faces="true" font=""></fb:like>
</div>';
elseif (!empty($modSettings['e_fb_post']))
echo '<div style="float:right;margin:5px">
<fb:like href="',$message['href'],'" send="true" width="300" show_faces="true" font=""></fb:like>
</div>';
}//Advance Fb like with OG
Currently I can't tell you exact location as I am not on computer currently. .. though you can try experimenting meanwhile...

[PLAYBOY]

I just tried now but it keeps giving me syntax error.
I think an option in the permission or another absolute solution would be better.

I really appreciate you try to help though.

[Ventic]

I just tried now but it keeps giving me syntax error.
I think an option in the permission or another absolute solution would be better.

I really appreciate you try to help though.

that happens to me too

lot of errors

[Ricky.]

Looks like this position is not very good .. is it ?

Anyways,  a new position you can try :
in Display.template.php
Find :

Code Select Expand

<hr class="post_separator" />';

Replace with

Code Select Expand


';
//Advance fb like with opengraph
if(!empty($modSettings['e_fb_enable']) && !empty($modSettings['e_fb_topic'])) {
if ($message['id'] == $context['first_message'])
echo '<div class="windowbg" style="text-align:center;">
<span class="topslice">
<span></span>
</span>
<fb:like href="',$scripturl ,'?topic=',$context['current_topic'],'.0" send="true" width="500" show_faces="true" font=""></fb:like>
<span class="botslice">
<span></span>
</span>
</div>';
elseif (!empty($modSettings['e_fb_post']))
echo '<div class="',$message['alternate'] == 0 ? 'windowbg' : 'windowbg2','" style="text-align:center">
<span class="topslice">
<span></span>
</span>
<fb:like href="',$message['href'],'" send="true" width="500" show_faces="true" font=""></fb:like>
<span class="botslice">
<span></span>
</span>
</div>';
}//Advance Fb like with OG
echo '
<hr class="post_separator" />';
[/code]

Also not to forget to remove this code :

Code Select Expand

//Advance fb like with opengraph
if(!empty($modSettings['e_fb_enable']) && !empty($modSettings['e_fb_topic'])) {
if ($message['id'] == $context['first_message'])
echo '<div style="float:right;margin:5px">
<fb:like href="',$scripturl ,'?topic=',$context['current_topic'],'.0" send="true" width="300" show_faces="true" font=""></fb:like>
</div>';
elseif (!empty($modSettings['e_fb_post']))
echo '<div style="float:right;margin:5px">
<fb:like href="',$message['href'],'" send="true" width="300" show_faces="true" font=""></fb:like>
</div>';
}//Advance Fb like with OG

[PLAYBOY]

This is pretty good. I personally liked it a lot. But some of my members who have slow internet connections complaint about buttons slowing down the load time for each page. So i think an option in permission section or an option in every members profile would be the best for all the problems. Maybe it could be added in the next version (update).

Once i get the above option (or in a new update) i will translate this mod to Turkish. You have my word.

Thank you for all your help.

[Ricky.]

Ya, it does slow down as for every post it needs to connect to FB server, you can disable for each post. However, in next update I will try to include Group permission for this MOD.

[Ventic]

waiting your update

[PLAYBOY]

Is there any solution for the scroll bar issue yet?
http://www.simplemachines.org/community/index.php?topic=457963.msg3199714#msg3199714