Need help? Check out our Support site, then


WordPress.com Forums » Staff Answers

Social codes will not post as icons on blog

  1. cbgloves
    Member

    Hello, I have been trying to add "Follow" (for Twitter and Pinterest) and "Like" (Facebook) links to my blog (www.cbg-loves.com) and having a number of issues.

    My first preference would be to publish the same rounded/square "chiclet" style icons for each of the three social networks. I'd like to position them above and aligned with the RIGHT column if possible. I tried to do this by finding the logos and then attaching the relevant "follow" or "like" code from the respective sites, but I can't get it to publish on my blog.

    - When I copy/paste the code for the Twitter follow, the code publishes to the bog, not the visual icon. I don't want my Twitter feed to publish now, only the Follow button.

    - For Facebook, I would prefer the Like box w/the count, not the entire box. Yet, when I copy/paste the code for this, the widget doesn't save it.

    - For Pinterest, I can't figure out how to get it to work. I've tried to link an image and attach the URL, but it isn't working. I can't find where my "admin" page is in order to get the box - I did download the file from the WP page, but I can't figure out what do to with it and don't get the live logo page.

    I've spent hours to no avail trying to figure out something that I'm sure should have only taken me a few minutes I'm sure. I'd really appreciate any help you could provide.

    Thank you.

    Best regards,
    Julie Kurtzman
    Blog url: http://cbgloves.wordpress.com/

  2. macmanx
    Happiness Engineer

    For Twitter, try this in a Text widget: https://en.support.wordpress.com/twitter/twitter-follow-button/

    For Facebook, try our Facebook Like Box widget: https://en.support.wordpress.com/facebook-integration/#facebook-like-box

    We don't have anything direct for Pinterest, but if they offer button code that is free of Flash, JavaScript, or iframes, you can add it via a Text widget: http://en.support.wordpress.com/widgets/text-widget/

  3. cbgloves
    Member

    Hi, Thank you for the reply, however you've provided me links to the exact codes that I've already copy/pasted and did not work.

    For example, for Twitter, I've copy/pasted this: twitter-follow screen_name='wordpressdotcom'
    changing the 'wordpressdotcom' to 'citybeautyguide' The result is that the text, not the button is displayed on my blog.

    For Facebook, I don't want the larger Like box, I would prefer the button and have been on the page you provided the link to above, and again, the code pasted, not the button.

    As for Pinterest, how would I know if the code is free of Flash, JavaScript or iFrames? This is the code they provide:
    <img src="http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" />

    What am I doing wrong?

    Regards,
    Julie

  4. cbgloves
    Member

    One more thing, I have tried pasting the code using both the Text widget as well as the Image widget.

  5. macmanx
    Happiness Engineer

    For Twitter, try this in a Text widget (not an Image widget). If that doesn't work, please leave it up so I can take a look.

    [twitter-follow screen_name='citybeautyguide']

    Facebook's Like button code uses iframes, so there's no way to add just that without it being filtered out. Our Like Box widget can be scaled back to roughly just the button by unchecking "Show Faces" and "Show Stream".

    The forum filtered out your Pinterest code, which may not be a good sign, but if the code they provide does not mention "flash," "javascript," "script," or "iframe," please feel free to try it in a Text widget (not an image widget).

  6. cbgloves
    Member

    Hi, thanks again for the quick reply.

    If you view the blog you'll see that Twitter did the same again and published the code (I pasted it in to the body copy of the text box)

    RE: Facebook, from the WP support pages, there was a link to get the FB Like button code, why doesn't this work?

    RE: Pinterest, you'll see the icon, but the link isn't working - you can view it on this forum above. There is no mention in the code of any of the names you said it should not have.

    What I want is all three (Twitter, FB and Pinterest) to look like the Pinterest icon - I see this on blogs all the time - so the look is uniform. Can you advise how I can do this?

    It's about 1am here in NYC, so I may have to reply tomorrow. I'm very appreciative of your help and look forward to your reply and hopefully a successful solution to my objective :)

    Thanks again,
    Julie

  7. macmanx
    Happiness Engineer

    You were adding the Twitter code without the brackets. It has been fixed now.

    The Facebook Like Button that you see on there is for individual posts, not the blog itself. Those can be added via Settings -> Sharing in your blog's Dashboard.

    Can you please tell me exactly where you're getting the Pinterest code from? What you have pasted in there is literally just the image code, nothing more.

  8. cbgloves
    Member

    Hi,

    I actually did try adding the code earlier with the brackets, but the same thing happened. You must have the magic touch.

    I'll try the FB from the dashboard tomorrow as you suggested.

    Here is where I got the Pinterest code from: https://pinterest.com/about/goodies/

    In their Help section is a link to Goodies and it's midway down the page.

    How about my desire to have the three links uniform? Is it possible or you to give me some direction on how to do that?

    Thank you again for the help in getting these to work.

  9. macmanx
    Happiness Engineer

    Try this code for Pinterest in a Text widget:

    <a href="http://pinterest.com/USERNAME/"><img src="https://s-passets-ec.pinimg.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" /></a>

    As for getting them uniform, it's roughly possible, but you would need a Custom Design upgrade to make the necessary CSS changes.

    http://en.support.wordpress.com/custom-design/custom-css/

  10. cbgloves
    Member

    Hi there,

    Thank you very much, the code you provided for Pinterest worked great! I changed "USERNAME" to "CITYBEAUTYGUIDE" Where did you find this? What was I doing wrong?

    I already do subscribe to Custom Design for this blog, however don't know CSS. Sorry to impose...again...but could you provide direction for me where to go to figure this out and apply the uniform logos (w/the like/follow links)? I'd like to learn as much as I can so I can do it the next time and apply to other apps.

    In the meantime, how can I get the spacing to look better for the social widgets in the right column? It looks weird.

    Thanks again - look forward to your reply.

  11. macmanx
    Happiness Engineer

    The Pinterest code was on that same page. I just clicked on the larger icon that you wanted and the code appeared to the right.

    As for the alignment, after some tinkering I realize that I was way off, sorry. :(

    Ok, so you have two options:

    1. Both the Facebook Like box and Twitter Follow button are about the same width as the sidebar, so there's no way to get the two in the same row, much less all three. If you want to stick with those, I recommend just re-oganizing them vertically by width, so you'll have:

    Pinterest
    Twitter
    Facebook

    It's the best aesthetic way to keep the functionality of the Facebook Like and Twitter Follow buttons.

    2. If you don't mind losing the functionality of the Like and Follow buttons and just linking to your Facebook and Twitter pages, like the Pinterest button does, we could work the HTML together into a Text widget.

    Please note that Facebook Like will no longer immediately Like your page, it will just direct folks to it, and likewise with the Twitter Follow button.

    Please let me know how you'd like to proceed!

  12. cbgloves
    Member

    Hi,

    Okay, so I think I get what you are saying: basically, if I want to go for the more uniform aesthetic (i.e. "matching" icons), then I give up the immediate "Like" or "Follow" functionality. I can still like to the pages, but then the user has to click again to Like or Follow.

    Hmmm...less than ideal isn't it? Okay, would it be okay if I get back to you a little later? I would like to touch base with my biz partner? I'd like her pov before making the call. In the meantime, I'll adjust the text widgets - but the spacing still looks awful - they are so far apart.

    Thanks again,
    Julie

  13. macmanx
    Happiness Engineer

    Yes, it is a bit less than ideal. Personally, I'd prefer to just stick with the less uniform Like and Follow buttons, as the extra click (to the FB page, then Like; or to the Twitter page, then Follow) could result in someone just not Liking or Following.

    Of course, that's just my personal opinion.

    Sorry for the trouble, and please feel free to reply whenever convenient.

  14. cbgloves
    Member

    Yes, that is my feeling as well. I just wish there were more options for the widget look and feel for the social apps.

    Thanks again - back to you later.

  15. macmanx
    Happiness Engineer

    You're welcome!

  16. cbgloves
    Member

    Hi there. Okay so we agree that we are better off maintaining the widget functionality. Before I let you go completely, is there anything I can do to fix the spacing between the widgets so they are not quite do far apart? I did reorder them as you suggested, but they still don't look great. Amy suggestions?

    Thanks again. Look forward to your reply.

    Julie

  17. cbgloves
    Member

    Hi there. Okay so we agree that we are better off maintaining the widget functionality. Before I let you go completely, is there anything I can do to fix the spacing between the widgets so they are not quite do far apart? I did reorder them as you suggested, but they still don't look great. Amy suggestions?

    Thanks again. Look forward to your reply.

    Julie

  18. macmanx
    Happiness Engineer

    There's no direct way to do it, but I think the main problem is the spacing below the Twitter Follow button, so maybe try placing that at the bottom, below the Facebook Like Box.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags