...

View Full Version : Using my own facebook icon?



OurJud
02-23-2011, 01:26 AM
I recently installed a facebook icon on my blog that shows up on each of my posts. It works perfectly, but I'm not keen on the icon (too big). I thought I could just create my own to replace the default one, but instead of the normal img src='url of image' in the html, I have script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share

Is there anyway to replace this default facebook icon with my own?

The blog in question is here: http://uk451.blogspot.com/

Thanks in advance.

VIPStephan
02-23-2011, 02:14 AM
You’ll have to use CSS for that and write .FBConnectButton_Simple, .FBConnectButton_RTL_Simple {background-image: url(your/image.png) !important;} in your stylesheet. Use a debugging tool like Firebug or similar built in tools in Safari/Chrome, or Opera to find things like that.

OurJud
02-23-2011, 02:29 AM
Thanks very much, Stephan - much obliged!

OurJud
02-23-2011, 06:57 PM
Sorry to bring this up again, but would it be possible to use text instead of an image in this case.

Stephan's method resolved the original question, but when I tried to modify it to display text by using .FBConnectButton_Simple, .FBConnectButton_RTL_Simple { background-image: url ("recommend to facebook") !important; } - it didn't work.

This is the original code I was given to create the facebook icon and link. I'm now wondering if I could replace the icon with text here?


<!-- Facebook Button -->
<div style='float: left; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='icon'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

Excavator
02-23-2011, 07:20 PM
Hello OurJud,
You can't add text from the CSS like your trying. Text would be added from the markup. You can add yours inside the anchor tags like this bit highlighted in red -
v style="float: right; ">
<a style="text-decoration: none;" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fuk451.blogspot.com%2F2011%2F02%2Fone-song-one-image-juxtaposed-3.html&amp;src=sp" name="fb_share" rel="nofollow" share_url="http://uk451.blogspot.com/2011/02/one-song-one-image-juxtaposed-3.html" type="icon"><span class="FBConnectButton_Simple"><span class="FBConnectButton_Text_Simple">put your text here</span></span></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
</h2>

Do you really need those span elements? They hardly seem necessary.

OurJud
02-23-2011, 08:11 PM
Sorry, Excavator, my css and html know-how isn't at the level I suspect you think it is.

I have no real idea of what you're telling me to do here, or what you're asking me regards the span elements.

That code you've given there isn't the same as the one I provided? For instance, the one I provided doesn't end with the closing tags </div> and </h2>

The markup for the facebook icon that I want to replace with text is:


<!-- Facebook Button -->
<div style='float: left; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='icon'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

Where in there do I need to put the text? I know you probably think you've already told me, but I ask that you be patient becuase your explanation just confused me.

Excavator
02-23-2011, 11:18 PM
Before you edited your last post it looked like you were trying to put link text in from the CSS and that wouldn't have worked. The text you wanted is that bit I highlighted in red.
The code is just a random section cut from your markup, the only part you would change is the bit highlighted in red.

If you've changed what you're doing now... that example may not apply anymore.

OurJud
02-24-2011, 12:21 AM
I can't remember why I edited it now, but what you say about me trying to use a text link in css is still there - highlighted in yellow.

I appreciate now that this isn't the way to do it, but I still don't understand where I'm supposed to insert the line of code (highlighted in red) that you've given me??

For instance, the line <span class="FBConnectButton_Text_Simple"> isn't even in my html/css template code.

Excavator
02-24-2011, 01:10 AM
For instance, the line <span class="FBConnectButton_Text_Simple"> isn't even in my html/css template code.


I suspect then that your blogger template is adding things via includes or js that I can't see on this end. All I get on this end is the rendered version of your code and that's how I see those extra spans.

OurJud
02-24-2011, 01:29 AM
Okay. Thanks very much for all your help, Excavator.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum