vb.org Archive - Simple Facebook "like" button on the navbar

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - Simple Facebook "like" button on the navbar (https://vborg.vbsupport.ru/showthread.php?t=311847)

dimitrisvb

06-02-2014 07:27 AM

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).

http://www.λέσχη.gr/eikones/diafores/fb_button1.jpg

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

http://www.λέσχη.gr/eikones/diafores/fb_button2.jpg

Is there a way to do so?
thx :)

ForceHSS

06-02-2014 10:33 AM

depends what vb version

dimitrisvb

06-02-2014 02:32 PM

vBulletin v 4.2.2

409industries

08-01-2014 09:32 PM

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.

tbworld

08-01-2014 10:01 PM

Quote:

Originally Posted by 409industries (Post 2509357)

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. :)

409industries

08-02-2014 04:46 AM

1 Attachment(s)

Quote:

Originally Posted by tbworld (Post 2509360)

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 :D:up:

Darkness95

08-02-2014 02:14 PM

Quote:

Originally Posted by 409industries (Post 2509407)

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>

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 ;)

409industries

08-04-2014 04:49 PM

Quote:

Originally Posted by Darkness95 (Post 2509450)

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!

tbworld

08-04-2014 10:34 PM

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>

Darkness95

08-05-2014 02:47 AM

Quote:

Originally Posted by 409industries (Post 2509681)

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

409industries

08-05-2014 08:26 PM

Quote:

Originally Posted by tbworld (Post 2509777)

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>

Quote:

Originally Posted by Darkness95

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

Indeed, only logged in users see the connect button (oh and don't bother using Internet Explorer it never shows it :D )

Use this test account if you want to take a look:

user: support3
pass: P@ssw0rd123!

Thanks a bunch for taking the time to check it all out! :up:

tbworld

08-05-2014 08:37 PM

Quote:

Originally Posted by 409industries (Post 2509893)

Can everything between the "style" tags go in the additional.css template? Thanks for posting all of that up, i'll be giving it a try!
-

Yes, I just posted it there for convenience for my own testing. I think I even posted a comment stating that you should move it to your CSS file, of course without the <style> tags. :)

Darkness95

08-06-2014 12:11 PM

Quote:

Originally Posted by 409industries (Post 2509893)

Can everything between the "style" tags go in the additional.css template? Thanks for posting all of that up, i'll be giving it a try!

--------------- Added [DATE]1407274350[/DATE] at [TIME]1407274350[/TIME] ---------------

Indeed, only logged in users see the connect button (oh and don't bother using Internet Explorer it never shows it :D )

Use this test account if you want to take a look:

user: support3
pass: P@ssw0rd123!

Thanks a bunch for taking the time to check it all out! :up:

I can't login with this user! Anyway, i created a new user and i can't see the connect button:

http://dvdimagehosting.altervista.or...immagineee.png

409industries

08-07-2014 08:33 PM

Quote:

Originally Posted by Darkness95 (Post 2509987)

I can't login with this user! Anyway, i created a new user and i can't see the connect button:

http://dvdimagehosting.altervista.or...immagineee.png

That is because that is the OP's forum :p

I was following up on this thread with my own question... forum is located here: http://www.dirtyimpreza.com/forums/

Darkness95

08-10-2014 01:38 PM

Quote:

Originally Posted by 409industries (Post 2510268)

That is because that is the OP's forum :p

I was following up on this thread with my own question... forum is located here: http://www.dirtyimpreza.com/forums/

The like button is in another part of the theme compared to connect button! :S

dimitrisvb

12-17-2014 02:52 PM

getting back to this..

i've experimented and kind of did it..

i've edited the Navbar template, and placed two more elements (a facebook and a twitter button) :

Code:

<!-- προσθήκη για facebook like -->

<vb:if condition="THIS_SCRIPT == 'facebook like'">

<li class="selected"><iframe src="//www.facebook.com/plugins/......" allowTransparency="true"></iframe>

</li><vb:else />

<li><iframe src="//www.facebook.com/plugins/....." allowTransparency="true"></iframe></li>

</vb:if>

<!-- κλείνει η προσθήκη facebook like -->



<!-- προσθήκη για twitter follow -->

<vb:if condition="THIS_SCRIPT == 'twitter follow'">

<li class="selected"><a href="https://twitter.com/......" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @......</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li><vb:else />

<li><a href="https://twitter.com/......" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @......</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

</li>

</vb:if>

<!-- κλείνει η προσθήκη twitter follow -->

just before the first <ul> closes...

It looks like this now:

https://vborg.vbsupport.ru/

Both buttons seem to work ok. But they are stuck to the top of the navbar.
Also, when the window is resized and there's not enough space, they get out of the bar and look messy:

http://www.λέσχη.gr/eikones/diafores/fb_btn2.jpg

I wonder:
a) is there a way to have them vertically align to the middle?
b) is there a way to have them placed on the right, just before the search box?
c) how can I have them fixed, so that they don't get out of the navbar when the windows gets smaller and there's not enough space?

thnx :)

HM666

12-17-2014 05:29 PM

Quote:

Originally Posted by dimitrisvb (Post 2527665)

getting back to this..

i've experimented and kind of did it..

i've edited the Navbar template, and placed this code:

Code:

<!--  facebook like button begin -->

<vb:if condition="THIS_SCRIPT == 'facebook like'">

<li class="selected"><iframe src="//www.facebook.com/plugins/like.php?href=https..........." scrolling="no" frameborder="0" align="middle" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

</li><vb:else />

<li><iframe src="//www.facebook.com/plugins/like.php?href=https..........." scrolling="no" frameborder="0" align="middle" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></li>

</vb:if>

<!--  facebook like button end -->

as the last element just before the first <ul> closes...

It looks like this now:

http://www.λέσχη.gr/eikones/diafores/fb_btn.jpg

and it seems to work. But it's stuck to the top and I wonder:

How can I vertical align it? As you can see, I put align="middle" in the iframe tag, but nothing much happens.

Further, would it be possible to have it on the right, next to the search box?

thnx :)

You will need to add CSS to get it perfectly aligned where you want it. To move it to right next to the the search field you can try to use the css code float:right; To make it center and not be hugging the top you can either try padding-top:5px; (you can increase or decreased the pixels amount to fit it perfectly) or try margin-top:5px; (again you can adjust the number). You will need to probably make a new div tag for this and add it to your additional.css template.

dimitrisvb

12-17-2014 06:08 PM

i've played around with <div> tags, with no much success..

btw. i've updated the first post (sorry :/ )

HM666

12-17-2014 09:38 PM

Quote:

Originally Posted by dimitrisvb (Post 2527729)

i've played around with <div> tags, with no much success..

btw. i've updated the first post (sorry :/ )

Actually looking at your code from above you can add those CSS values into the code you provided in that last post you made before mine.

ozzy47

12-17-2014 11:25 PM

Link to the site, with the button enabled so guests can see it.

dimitrisvb

12-18-2014 05:24 AM

@HM666: not sure what i have to do.. i've tried this and that but the issues I mentioned, remain...

@ozzy47: Here's the link: "Λέσχη του Βιβλίου"

HM666

12-18-2014 10:58 AM

It maybe the iframe that is causing an issue. Sometimes iframes do not play well with vBulletin. I assume that you are using the Facebook iframe code. Have you tried to use the HTML or div code instead of the iframe?

All times are GMT. The time now is 03:28 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01655 seconds Memory Usage 1,841KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (7)bbcode_code_printable (1)bbcode_php_printable (13)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (22)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: