Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 06-02-2014, 07:27 AM
dimitrisvb's Avatar
dimitrisvb dimitrisvb is offline
 
Join Date: Oct 2008
Location: Greece
Posts: 41
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Simple Facebook "like" button on the navbar

Hi,
Recently I've put a facebook button in my forum regarding my facebook page.

First I've tried placing it in the logo (using the ad managment) but didn't like it much, there. Now I have it below the navbar, as you can see in the first image, but I don't like it much there, either. It takes too much space altogether (including the white space).




I think I'd prefer a simple button on the navbar next to the rest of the tabs like you can see here below:




Is there a way to do so?
thx
Reply With Quote
  #2  
Old 06-02-2014, 10:33 AM
ForceHSS ForceHSS is offline
 
Join Date: Apr 2008
Posts: 6,357
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

depends what vb version
Reply With Quote
  #3  
Old 06-02-2014, 02:32 PM
dimitrisvb's Avatar
dimitrisvb dimitrisvb is offline
 
Join Date: Oct 2008
Location: Greece
Posts: 41
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

vBulletin v 4.2.2
Reply With Quote
  #4  
Old 08-01-2014, 09:32 PM
409industries 409industries is offline
 
Join Date: Jan 2008
Posts: 63
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

dimitrisvb-

Did you ever get this figured out? I am trying to do something very similar in vB4.2 as well. I would like to know what you did to get this done.

Thank you.
Reply With Quote
  #5  
Old 08-01-2014, 10:01 PM
tbworld tbworld is offline
 
Join Date: Oct 2008
Posts: 2,126
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by 409industries View Post
dimitrisvb-

Did you ever get this figured out? I am trying to do something very similar in vB4.2 as well. I would like to know what you did to get this done.

Thank you.

See template: "facebook_header", look for the following two lines.
Code:
        <img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
        <img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
I am pretty sure you can handle it from there. I have seen your work.
Reply With Quote
  #6  
Old 08-02-2014, 04:46 AM
409industries 409industries is offline
 
Join Date: Jan 2008
Posts: 63
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by tbworld View Post
I am pretty sure you can handle it from there. I have seen your work.
As much as it pains me to admit... I struggled to figure out how to get this button to appear "in line" with the other links.

Here is where I inserted my facebook like code (in the facebook_header template):

Code:
<li id="fb_headerbox" class="hidden">
<div class="fb-like" data-href="http://facebook.com/myfacebookpage" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="verdana" data-colorscheme="dark">
</div>
<vb:if condition="$show['facebookuser']">
	<a id="fb_link" href="{vb:raw profileurl}">
		<img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
		<img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
	</a>
<vb:else />
	<a id="fb_loginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
</vb:if>
</li>
and this is the result (see attached image)

How do i get the "Like" button to appear to the left of the facebook connect icon, and have them all lined up in a wonderfully horizontal flow?

p.s. I appreciate your confidence in my ability to work with vB... LOL :up:
Attached Images
File Type: jpg facebook_like_header.jpg (27.8 KB, 0 views)
Reply With Quote
  #7  
Old 08-02-2014, 02:14 PM
Darkness95's Avatar
Darkness95 Darkness95 is offline
 
Join Date: Sep 2010
Location: Italy
Posts: 10
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by 409industries View Post
As much as it pains me to admit... I struggled to figure out how to get this button to appear "in line" with the other links.

Here is where I inserted my facebook like code (in the facebook_header template):

Code:
<li id="fb_headerbox" class="hidden">
<div class="fb-like" data-href="http://facebook.com/myfacebookpage" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="verdana" data-colorscheme="dark">
</div>
<vb:if condition="$show['facebookuser']">
	<a id="fb_link" href="{vb:raw profileurl}">
		<img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
		<img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
	</a>
<vb:else />
	<a id="fb_loginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
</vb:if>
</li>
and this is the result (see attached image)

How do i get the "Like" button to appear to the left of the facebook connect icon, and have them all lined up in a wonderfully horizontal flow?

p.s. I appreciate your confidence in my ability to work with vB... LOL :up:

You can use two different tricks:

1) float-left / float-right CSS property
2) display: inline-block CSS property

I recommend you to use the float-left CSS property because this facebook "like" button code is too messy and it should be too difficult use inline-block!

Try this:

PHP Code:
<vb:if condition="$show['facebookuser']">
    <
a id="fb_link" href="{vb:raw profileurl}">
        <
img style="float: left; margin-left: 5px;" id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
        <
img style="float: left; margin-left: 5px;" id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
    </
a>
<
vb:else />
    <
a id="fb_loginbtn" href="#"><img style="float: left; margin-left: 5px;" src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
</
vb:if>
</
li
I'm not sure that the code will works perfectly because i can't see the properties of #fb_squarepic and #fb_icon and i can't see the result on your forum, but i think it will works!

You're welcome
Reply With Quote
Благодарность от:
tbworld
  #8  
Old 08-04-2014, 04:49 PM
409industries 409industries is offline
 
Join Date: Jan 2008
Posts: 63
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Darkness95 View Post
I'm not sure that the code will works perfectly because i can't see the properties of #fb_squarepic and #fb_icon and i can't see the result on your forum, but i think it will works!
Darkness95-

Thanks for the tip about float left, it seems to keep the formatting on the rest of the page correct (in Chrome at least) but still the like button is on top of the facebook connect functions. I'm trying to get this to appear to the left... so everything is in a single row.

Having a tough time with this!
Reply With Quote
  #9  
Old 08-04-2014, 10:34 PM
tbworld tbworld is offline
 
Join Date: Oct 2008
Posts: 2,126
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yeah, the CSS here can get a bit tricky. On top of that the selector names are inconsistent, some use "fb-" others use "fb_". Even if you do not use some of the selectors below keep them handy for the future. Alter the margins to your layout.
I modified the HTML structure just a bit with a container class ".fb_custom_container".

Code:
<style>
/* Add this to the bottom of your CSS file,
   It was just placed here for convience.

   1px = property placeholder so you can see the properties in a browser debugger.
         Their actual value is 0px;

    You will need to alter the following values to adapt to your layout.
*/

.toplinks ul.nouser #fb_loginbtn {
  margin-right: 1px;   /* 0px */
}
.toplinks ul.isuser #fb_loginbtn {
  margin-right: 5px; 
}
.toplinks ul.nouser .fb-like {
  margin-right: 12px; 
}
.toplinks ul.isuser .fb-like {
  margin-right: 1px;   /* 0px */ 
}
.toplinks ul.isuser #fb_link {
  margin-right: 12px; 
}
.toplinks div.fb_custom_container {
  float: left;
}
</style>

<li id="fb_headerbox" class="hidden">
    <div class="fb-like" data-href="http://facebook.com/myfacebookpage" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="verdana" data-colorscheme="dark">
    </div>
    <div class="fb_custom_container">
        <vb:if condition="$show['facebookuser']">
            <a id="fb_link" href="{vb:raw profileurl}">
                <img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
                <img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
            </a>
        <vb:else />
            <a id="fb_loginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
        </vb:if>
    </div>
</li>
Reply With Quote
  #10  
Old 08-05-2014, 02:47 AM
Darkness95's Avatar
Darkness95 Darkness95 is offline
 
Join Date: Sep 2010
Location: Italy
Posts: 10
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by 409industries View Post
Darkness95-

Thanks for the tip about float left, it seems to keep the formatting on the rest of the page correct (in Chrome at least) but still the like button is on top of the facebook connect functions. I'm trying to get this to appear to the left... so everything is in a single row.

Having a tough time with this!
Ok, if you link me your forum i'll give you the 100% workly code!

----------------

Edit:

Ok, i have found it with the link of your screenshots! But i can't see the connect button! :S
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:04 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.11223 seconds
  • Memory Usage 2,309KB
  • Queries Executed 14 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (4)bbcode_code
  • (1)bbcode_php
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (10)post_thanks_box
  • (1)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (10)postbit
  • (1)postbit_attachment
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • postbit_attachment
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete