Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    227
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Using my own facebook icon?

    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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.

  • Users who have thanked VIPStephan for this post:

    OurJud (02-23-2011)

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    227
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks very much, Stephan - much obliged!

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    227
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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?

    Code:
    <!-- 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 -->
    Last edited by OurJud; 02-23-2011 at 06:07 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Feb 2010
    Posts
    227
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!-- 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.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Feb 2010
    Posts
    227
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by OurJud View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Feb 2010
    Posts
    227
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Okay. Thanks very much for all your help, Excavator.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •