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

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.

More by this Author


Comments 10 comments

Simone Smith profile image

Simone Smith 5 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!


chamilj profile image

chamilj 5 years ago from Sri Lanka

Very useful tutorial. Thanks!


gtmroy profile image

gtmroy 5 years ago from Dhaka

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


Leo 5 years ago

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


VickGo 5 years ago

Many thanks, implemented successfully.


Kris Kemp 4 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

:)


Sinea Pies profile image

Sinea Pies 4 years ago from Northeastern United States

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


livelonger profile image

livelonger 4 years ago from San Francisco Author

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!


nexus25 profile image

nexus25 4 years ago from Yogyakarta

Try sharethis services, it's good


bookerboy profile image

bookerboy 4 years ago from Ireland

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

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working