ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Blogs

Embed Facebook Like & Twitter/Tweet Buttons - WordPress No Plugin

Updated on December 21, 2011
Embed Twitter and Facebook Like buttons into your WordPress blog posts. They'll help your readers share your posts with people they know.
Embed Twitter and Facebook Like buttons into your WordPress blog posts. They'll help your readers share your posts with people they know.

Want to easily embed standard Twitter and Facebook Like buttons in your WordPress blog, but want to use standard code and not necessarily a clunky plugin that could break? Believe me, I understand. After piecing together data and tutorials from several different sources, I have a method that has works nicely. You don't have to be an engineer, but messing around with a little code shouldn't totally freak you out, either.

Note: You can use this method to both display these buttons in the full blog view, or in an individual post.

1. Grab the Facebook Like Button code

Facebook makes creating and customizing a Facebook Like button pretty easy. Hop on over to their Like button page, and enter these values into the widget:

  • URL to like: CHANGETHIS (you may have to put http://CHANGETHIS to get Facebook to accept this)
  • Width: 200 (you can change this, depending on the width of your blog posts)
  • any other aesthetic options (light/dark, font, etc.)

Then click Get Code button and then select IFRAME from among the subtab options.

Paste the iframe code somewhere, like in Notepad. The code should look like this (it might be a little different since Facebook is constantly tweaking these sorts of things):

<iframe src="//www.facebook.com/plugins/like.php?href=CHANGETHIS&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=96285278221" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:80px;" allowTransparency="true"></iframe>

2. Grab the Twitter Button code

This is very similar to the process for getting the embed code for the Facebook Like button. Head over to the Tweet Button page, and fill out the fields as per below:

  • 1 - Button: Horizontal count
  • 1 - Tweet text: CHANGETHIS
  • 1 - URL: CHANGETHIS
  • any other changes you'd like to make to the language, recommended people to follow, etc.

You can grab the code immediately below. It will look something like this:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="CHANGETHIS" data-text="CHANGETHIS" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>

3. Add some div wrappers

First, add some div wrappers to your two embed codes to create one block of code:

<div style="margin: 0 0 10px 0; float: left;">

[Twitter Tweet button embed code - from step #2]

[Facebook Like button embed code - from step #1]

<div style="clear: both;"></div>

</div><br/><br/>

4. Make some substitutions to CHANGETHIS

In your embed codes, you now have 3 instances of CHANGETHIS (or http://CHANGETHIS) which you must, um, change. :)

  1. TWITTER: data-url="CHANGETHIS" ----change to----- data-url="<?php echo get_permalink() ?>"
  2. TWITTER: data-text="CHANGETHIS" ----change to----- data-text="<?php the_title(); ?>"
  3. FACEBOOK: ...like.php?href=CHANGETHIS&amp;... ----change to----- ...like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;...

5. Embed in via your Theme Editor

Drop the entire code block in between these two tags in your Single Post (single.php) and Main Index Template (index.php) files when using the Theme Editor:

<?php include 'by_author.php'; ?>

[ENTIRE CODE BLOCK FROM STEP #4]

<div class="entry">

...Because every template is different, you might have to fiddle with the exact location of the code block, but that's generally where you want to put it if you want it between the blog post title and byline, and the body of the post itself.

Comments

    0 of 8192 characters used
    Post Comment

    • bookerboy profile image

      bookerboy 5 years ago from Ireland

      one of the most detailed hubs of all time - thanks a million !!

    • nexus25 profile image

      Mara Mei 5 years ago from Yogyakarta

      Try sharethis services, it's good

    • livelonger profile image
      Author

      Jason Menayan 5 years ago from San Francisco

      Sinea: I'm not sure. I think Blogger might work differently, but if you want to try it out and let me know, I'd appreciate it!

    • Sinea Pies profile image

      Sinea Pies 5 years ago from Northeastern United States

      My blog is on Blogger...should the code work for that format as well?

    • profile image

      Kris Kemp 5 years ago

      Awesome post. You explained this very well and now I have a Facebook Like button for individual posts in my wordpress blog at http://www.kriskemp.com

      Just what I was looking for. Thank you.

      Kris Kemp

      :)

    • profile image

      VickGo 6 years ago

      Many thanks, implemented successfully.

    • profile image

      Leo 6 years ago

      Thanks for the tutorial. I've implemented this on my theme. And it works like a charm :)

    • gtmroy profile image

      gtmroy 6 years ago from Dhaka

      That's a very useful tutorial. I, however, use a plugin for that but I think this is very nice.

    • chamilj profile image

      chamilj 6 years ago from Sri Lanka

      Very useful tutorial. Thanks!

    • Simone Smith profile image

      Simone Haruko Smith 6 years ago from San Francisco

      Gyah! This is SO useful! I didn't know this was so easy to do without a plugin. Love it! Thanks so much for providing the useful HTML and everything. I'm awful with this stuff, but this looks quite doable!