A div with a share button + a like box.

[Jens1986]

Hi!

I am not very skilled with CSS, but I run a website that gets a lot of traffic from facebook. I run WP on that site.

I have a “Share on Facebook” button at the moment, that I put at the start and end of an article.

This is the code I have right now:
In extra.css:

.button {
    width:100%;
    display:block;
    padding:10px;
    float:center;
    font-family:Lucida Grande, Tahoma !important;
    font-size:24px;
    text-align:center;
    text-decoration:none !important;
    color:#FFF !important;
    }
  
.facebook    { background:#3b5998; }  
.facebook:hover    { background:#5574cb; }

In single.php I put this code:

<p><center><div style="border:0px !important;">
<script type="text/javascript">// <![CDATA[
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 class="button facebook" title="Klikk her for å dele dette på Facebook" onclick="return fbs_click()" href="http://www.facebook.com/share.php?u=<url>" target="_blank"><img src="/bilder/f-ico.png" style="vertical-align: text-top;">&nbsp; Del på Facebook</a>
</div><p></center>

And this is the result:
http://bildr.no/view/dXY3SVBm

However, I would love some changes, and this is where I need your help!!

I would like slightly rounded corners, facebook style. I would also like the button to be smaller, and then in the same div put in this code (its a Facebook “Like” button):
<div class="fb-like" data-href="http://facebook.com/sharemenorge" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

So this is how I want the result to be:
http://bildr.no/view/bGl5R1FS
A smaller button, with room for the like button as well. Plus rounded corners.

Can anyone help me?

[Paulie_D]

However, I would love some changes, and this is where I need your help!!

That’s what web designers and developers are paid for..

We don’t mind helping you out with some code ** you have written** that doesn’t quite work but we’re not here to write it for you.

Try doing some research about the effects you are trying to achieve, work on it yourself, and if you have problems then we can help.

I’ll get you started…rounded corners….look into border-radius.

Good luck.

[Author]

Posts