Enter your keyword

How To Add Tweet This And Facebook Links To Your Posts Without A Plugin

How To Add Tweet This And Facebook Links To Your Posts Without A Plugin

Have you noticed my new post footers? One aspect of the Thesis Theme I’m not overly fond of is the size of the comment link that appears at the end of posts by default — I’ve always thought the link and the comment number is just way too big, particularly on those times when you have a post without any comments, and the size of the font serves as a constant reminder of the fact that nobody loves you (only partially kidding). In the past, I have altered the CSS to change the size of the comment count, but I always wanted to restyle the whole thing and finally got around to it a few weeks back, and even added an image to stand out from other Thesis-powered websites. But I didn’t stop there: to really spice things up, I decided to add “Tweet This” and “Share On Facebook” buttons as well. If you like what I’ve done, please read on, because today I’m going to show you how you can have your comments look exactly the same way by adding a few lines of code to your custom files and making some custom image choices.

  1. Find some icons you like for your new comment and social media icons. You will need some images that you like to go with your comment links, as well as your Tweet This and Share On Facebook links. I’ve used small icons in sizes of about 25 pixels by 25 pixels, but if you want to use smaller or bigger icons, this is up to you. A good place to find them is by running a search on deviantArt, or browsing in the customization section of deviantArt. (If you’d like to use my images, you can download them here: comment bubble, twitter bird, Facebook Stamp.) Once you’ve downloaded your images and resized them as necessary, upload them to the custom images folder on your site (wp-content–>themes–>thesis_16–>custom–>images), and make a note of the URLs, you will need them later when we put in the code for our new comment links.
  2. Add code that will automatically shorten urls for the Tweet This button. The Tweet This button is not just a link to Twitter, it’s a full-service URL shortening program, so that your readers can tweet without having to shorten the URL to your post (particularly useful when you have long URLs, like I do). Here’s the code you need to add to make it do this:
    function shortenURL($longURL) {
    $shortURL = file_get_contents("http://tinyurl.com/api-create.php?url=".$longURL);
    echo $shortURL;
    }

    Just paste this into custom_functions.php and upload it to your server with FTP. We’ll include isntructions in the Tweet This button code so that it knows to use it every time.
  3. Add code to remove old comment link and add in a new one. We’re going to use some of the old code to generate our new comment link, but we have to tell the theme not to use the old version first. Here’s how we’ll do this, by posting this code into your custom_functions.php and uploading it to your website with FTP:

    function my_comments_link() {
    echo '

    ';
    comments_number(__('Be the first to comment', 'thesis'), __('1 comment', 'thesis'), __('% comments', 'thesis'));
    echo '

    ';
    }

    remove_action('thesis_hook_after_post', 'thesis_comments_link');
    remove_action('thesis_hook_after_post', 'thesis_comments_intro');

  4. Add in new code with comment link and social media links. Now that we’ve removed the comment link, we can add in a whole new section for our new links. Paste this code into your custom_functions.php file:

    function add_after_post () {
    ?>

  5. Finally, style the new section with CSS. To style the section exactly as I've done, you'll add in the following code to your custom.css file, changing the urls to reflect where your images are located on your webserver.

    div.afterpost {
    width: 560px;
    height:100px;
    color:#666666;
    text-transform:uppercase;
    font-size:12px;
    background:#ffffff;
    letter-spacing:1px;
    }

    div.afterpost a, div.afterpost a:visited {
    text-decoration:none;
    color:#666666;
    }

    div.afterpost a:hover{
    color:#ff6600;
    }

    .comments_intro {
    display:none;
    }

    div.afterpost span.tweetthis {
    background:url('images/tweetthis.png') no-repeat 0 15px;
    width: 60px;
    height: 50px;
    margin:0 0 20px;
    padding-left:30px;
    padding-top:20px;
    padding-bottom:10px;
    padding-right:5px;
    line-height:50px;
    }

    div.afterpost span.comment {
    background:url('images/comment.png') no-repeat 0 15px;
    width: 60px;
    height: 50px;
    margin:0 0 30px;
    padding-left:28px;
    padding-top:20px;
    padding-bottom:10px;
    padding-right:5px;
    line-height:50px;
    }

    div.afterpost span.facebook {
    background:url('images/facebook.png') no-repeat 0 15px;
    width: 60px;
    height: 50px;
    margin:0 0 30px;
    padding-left:25px;
    padding-top:20px;
    padding-bottom:10px;
    padding-right:5px;
    line-height:50px;
    }

    div.afterpost span.facebook a, div.afterpost span.facebook a:visited {
    text-decoration:none;
    color:#666666;
    }

    div.afterpost span.comment a:hover {
    text-decoration:none;
    color:#ff6600;
    }

    div.afterpost span.comment a, div.afterpost span.comment a:visited {
    text-decoration:none;
    color:#666666;
    }

    div.afterpost span.facebook a:hover {
    text-decoration:none;
    color:#ff6600;
    }

    div.afterpost span.tweetthis a, div.afterpost span.tweetthis a:visited {
    text-decoration:none;
    color:#666666;
    }

    div.afterpost span.tweetthis a:hover {
    text-decoration:none;
    color:#ff6600;
    }

Comments (10)

  1. Dec 30, 2009

    EXCELLENT Post! I was just looking for this Thesis customization info for my blogs. Well written and right on time. Thanks a lot!

  2. aviationMY
    Jan 26, 2010

    it not work at all..ive try this so many times..i got blank page when hot the save button..
    Add code to remove old comment link and add in a new one.[not work]

    please figure out something

    thank you!
    respond to me please!

  3. Jan 26, 2010

    I’m sorry it’s not working. It’s hard for me to prescribe a solution without seeing the code you’re using, and knowing what version of Thesis you have installed, etc. With code, you can get just one punctuation mark wrong and it won’t work. This code works on my site.

  4. Mar 15, 2010

    Hey Anna,

    Great site and tip!

    I just tried incorporating this code on my blog, however the Tweet This link doesn’t seem to be working. Instead, it sends a Warning code in the Twitter status message. Do you have any suggestions to solve this?

    Thanks.

  5. Mar 15, 2010

    Moe, the only time I’ve had that happen was if the title of the post was too long for Twitter. Is it possible that’s the case here?

    If not, there’s not a good way of figuring it out without looking really carefully to make sure there’s not a semicolon or something where it’s not supposed to be.

  6. Mar 15, 2010

    I checked again, however it’s doing this for every post.

    The error it shows is:

    “URL file-access is disabled in the server configuration in line 49” of my custom_functions.php (Thesis)

    Line 49 of my custom_functions.php is:

    “$shortURL = file_get_contents(“http://tinyurl.com/api-create.php?url=”.$longURL);”

    I’ll keep scanning the code for missing/extra semicolons.

    The comments & Facebook code are working flawless & look far better than the default & other plugins. Thanks again.

  7. Mar 16, 2010

    Got it working now. Thanks!

  8. Apr 2, 2010

    Hey man, thanks a lot, it works perfect, but I’m having a problem, it also appears on my other pages, like Contact, About, Links, Sitemap.
    How can I take it out from there?

  9. Apr 2, 2010

    Hi Fernando:

    I’m going to write this up in a post for next week, but as a quick answer, you can create a new custom CSS class called “noafterpost” by pasting the following code into custom_functions.php:

    .noafterpost div.afterpost {
    display:none;
    }

    Next, go to the pages where you don’t want it to appear and edit the page, scroll down in the wordpress form to the part that says “Custom CSS class” and enter in “noafterpost”

    That should work, with more detailed instructions coming next week.

  10. Apr 3, 2010

    Thanks it works, but the code you gave me goes in custom.css 🙂
    Thank you very much.
    Can you make a same one, but instead of comments, tweeter and facebook, can you do it like this author/time of post/categories/comments?
    I hope you can do it, thank you very much!

Post a Comment

Your email address will not be published.