Need help? Check out our Support site, then


"Share" next to "Like this"

  1. Hey,
    i was wondering, is there a way to make the "Like this" button appear next to the sharing Buttons (twitter/fb etc.)? Right now they are below each other and using a lot of space. Also, is there a way to replace the icons for the buttons with custom images?
    The theme we use is twentyten and the blog is istinalog.net
    Thanks in advance,
    Fred

    The blog I need help with is istinalog.net.

  2. is there a way to make the "Like this" button appear next to the sharing Buttons (twitter/fb etc.)?

    Because of the way the like button itself is inside an iframe on a different domain, you cannot target what is inside that iframe. What you can do is move the things inside that container area on the same level in the DOM (document object model) or on levels upstream.

    Here is an example that will illustrate. You can take this example and adjust the numbers in it to move the box around inside your post footers. I also added a red border around the likes to help you visualize. You should preview this CSS in the Appearance → Themes → Customize → CSS panel and then remove the red border before saving.

    div.sharedaddy h3,
    #content div.sharedaddy h3,
    #main div.sharedaddy h3,
    #primary div.sharedaddy h3 {
    	display: none;
    }
    
    div.sharedaddy,
    #content div.sharedaddy,
    #main div.sharedaddy {
    	position: relative;
    }
    
    div.sharedaddy.sd-rating-enabled .sd-like .post-likes-widget,
    div.sharedaddy.sd-sharing-enabled .sd-like .post-likes-widget {
    	float: none;
    	width: 150px;
    	border: 1px solid red;
    	position: absolute;
    	bottom: 10px;
    	right: 300px;
    }

    Last note, if something changes in the likes widget code (which is possible in the future), you will need to adjust your CSS accordingly at that time.

  3. Also, is there a way to replace the icons for the buttons with custom images?

    You can do this for buttons that aren't served from an iframe on a different domain. You can tell by looking at the HTML code.

    For example, right-click on one of the buttons and select the "Inspect Element" option. That should pull up the web inspector in your browser where you can see the HTML for the thing you clicked on and all of the CSS that applies to it. For each icon, find the snippet of CSS that contains the "background–image" property, copy it, and replace the url() value with a replacement image icon you have uploaded to your media library.

    Here is an example to get you started:

    li.share-email a.sd-button > span {
    	background-image: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png);
    }

    I used a WordPress logo image in this example, and it's too big, but you can make your image 16 x16 pixels so it will fit better.

Topic Closed

This topic has been closed to new replies.

About this Topic