I mentioned earlier that I did this yesterday and since my afternoon is pretty much benign, I thought I'd share with you the HTML codes for adding the "Facebook Like" Button and the 'Tweet This" button at the bottom of each article you post. That is, if you're using the Blogger platform like me.
Net presence. We want this, don't we all? Adding these two popular buttons is so easy peasy lemon squeezy!
First, go to your Dashboard> then click on the Layout tab> then click on Settings> then click on Edit HTML.
Once you're there, you have to check the box that says "Expand Widget Templates". It's located on the upper right hand corner of the Template code window.
It will refresh to the expanded widget template format. Just wait.
Then look for this code (y'know, the Edit>Find on your web browser will save you hours of cross-eyedness):
<data:post.body/>
Immediately after that, insert this code (just copy/paste, dear):
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
<span style='float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLabBnBMnfOLizztdS-Q7ppEnHV3M_PXsHSu6Ze22ylJw8o0txw9Gn3Us_eTX8vyiwOomj5K2SKNx0-kyutkVqmL5RL6Jr3JMteXqf2kRbTh6K3XiutF8p3_gYNFF-x2EU0TbyFwhCMST/s128/twitter-16x16.png) left no-repeat; padding-left: 20px;'><script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>
<span style='display:none;'>I'm reading: <data:post.title/></span>Tweet this!</a></span>
Easy peasy, isn't it? I hope the code works though. I converted it to simple codes first so it will appear on this post without being interpreted as...well...*quote-unquote with matching two-finger motions*...."codes", teehee. So if it doesn't work, then you can blame it on the Simple Code converter I used. The next lesson will be on that, I promise -- how I managed to paste HTML codes on this blog post for copying purposes -- and while dodging the uber-smart applications and preventing them from interpreting it as is.
I tried and tested the "Tweet This" button with my own account, but I haven't tried the "Facebook Like" Button because, let's face it, I can't FB-like my own articles -- that will be so narcisisstic and a totally shameless thing to be caught doing. I do campaign about my articles by posting the links though -- come on, show me a website who can't use some traffic!
Oh don't forget!
PLEASE MAKE A BACK-UP OF YOUR EXISTING HTML TEMPLATE BEFORE DOING THIS so that whatever happens, you can always revert to the original one. Try to preview it before saving too. That should save you a lot of tears. Or give me a holler and I'll TRY (I said TRY) to help you fix it, and email you the original codes directly.
Hope you can use my own buttons down below if you feel that I was able to help (murky up your mind a little worse) or "share/like" this post if you think others will benefit from it *hint* *hint* Or goshdarn, just leave me a comment so I know you've been here at least!!!
There you go. See, I told you I'm an indigo child (in my dreams!) LOL. Don't be scared. This surely is in the league of whipping up the simplest and most idiot-proof omelette in the history of Wonder Wifeys...and the Stepfordkind.
Is your nose bleeding yet? Mine is!
PS. Mukund, you rock!
Share
you should make more blogging tutorials. why you write clearer tutorials than i do!
Ngyah! I wish. But I don't have that much time =( You're better noh