have share buttons (fb/google/etc) next to reply button?

[tekmaster]

I'm having a difficult time trying to get the share buttons to be directly next to the reply button and have them properly lined up, especially in different browsers. Could anyone help me with this?

[Frosty]

That should not be difficult at all, can you post your code, demo, or a screenshot so we can see what's the problem?

[tekmaster]

Originally Posted by Frosty

That should not be difficult at all, can you post your code, demo, or a screenshot so we can see what's the problem?

sure,

I inserted the code in SHOWTHREAD, and in ff I want to try and line them up better and also in IE some buttons is slightly higher than the other and in all browsers google plus is just way out there lol

	<div id="above_postlist" class="above_postlist">
		<vb:if condition="$show['largereplybutton']">
			<a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1" 
class="newcontent_textcontrol"><vb:if condition="$show['closethread']"><span>+</span> {vb:rawphrase reply_to_thread}<vb:else />{vb:rawphrase closed_thread}</vb:if></a>
			<img style="display:none" id="progress_newreplylink_top" src="{vb:stylevar imgdir_misc}/progress.gif"  alt="" /> 
		</vb:if> <style> 
				   		html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 5px 0px 20px; height:15px; margin: 10px 0px 30px 10px; solid #d8dfea; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; font-size:12px; color:#ffffff;} 
						html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; text-decoration:none; } 
                        html .fb_like_button { margin: 5px 0px px 0px;} 
                        </style> 
                   <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>

				   
                   <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onClick="return fbs_click()" target="_blank" style="text-decoration:none;">分享</a> <script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script>&nbsp;<fb:like href="http://www.domainname.com/{vb:raw relpath}" layout="button_count" show_faces="false" width="450" font=""></fb:like>
<!-- Place this tag where you want the +1 button to render -->
<div class="g-plusone" data-size="medium"></div>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  window.___gcfg = {lang: 'zh-TW'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

[Frosty]

PHP Code:

<div id="above_postlist" class="above_postlist">
<div style="float:left">
<vb:if condition="$show['largereplybutton']">
<div style="padding-right:5px">
<a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1" 
class="newcontent_textcontrol"><vb:if condition="$show['closethread']"><span>+</span> {vb:rawphrase reply_to_thread}<vb:else />{vb:rawphrase closed_thread}</vb:if></a>
<img style="display:none" id="progress_newreplylink_top" src="{vb:stylevar imgdir_misc}/progress.gif"  alt="" /> 
</div>
</vb:if> 
<style> 
html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 5px 0px 20px; height:15px; margin: 10px 0px 30px 10px; solid #d8dfea; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; font-size:12px; color:#ffffff;} 
html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; text-decoration:none; } 
html .fb_like_button { margin: 5px 0px px 0px;} 
</style> 
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
<div style="padding-right:5px">
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onClick="return fbs_click()" target="_blank" style="text-decoration:none;">??</a> <script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script>&nbsp;<fb:like href="http://www.domainname.com/{vb:raw relpath}" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</div>
<div style="padding-right:5px">
<div class="g-plusone" data-size="medium"></div>
</div>
<script type="text/javascript">
  window.___gcfg = {lang: 'zh-TW'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div style="clear:left"></div> 


It probably ain't perfect, but you can try it and let me know how it goes!

[tekmaster]

hm wasn't successful, it made the 2 other buttons push down and one of them hidden

[Frosty]

Hmm, most likely because of the Facebook button, as it has its own style... Will the button work if you change its style attributes? I'm not sure because I don't use social network buttons and stuff.

[tekmaster]

if the style attributes are modified then yeah, mainly I was just wondering if that is the correct place to insert the code for the buttons, however the google plus button right now is what the bigger issue is. Since it requires a minimum width, it spaces it out and sticks the google plus button in the center of the screen

**Also I just realized I made this thread in the wrong category....