vTechTip - Computer Video Tutorials: Script

Showing newest posts with label Script. Show older posts

Add Facebook Comments Form for Blogger With Simple Step Facebook Comments is new tool from Facebook Social Plugins for blogger and website developer. With this tool, any Facebook member can comment at your blog easily and your commenh will be posted to their wall. So you can promote your article to milion of Facebook user.

     Now you just follow these very simple step to install Facebook Comment to your blog.

     1/ Install XFBML for your blog to use Facebook tag. If you've already install it for others Facebook Plugins, skip this step.

     2/ Open template, click Expand Widget Templates, find <data:post.body> and then paste this code after it (if there are more than 1 <data:post.body> tag, paste code after the final tag):

<p align='left'><img alt='Facebook Comments by vTechTip.com' class='icon-action' src='http://lh3.ggpht.com/_t2Z6nkGKLVc/TDKRPBXI_KI/AAAAAAAABc8/-FB8TnZPh0E/Facebook%20Comments.png' title='Facebook Comments by vTechTip.com'/></p>
<fb:comments numposts='15' width='600'/><noscript><a href='http://www.vtechtip.com' target='_blank'>Computer Video Tutorials</a></noscript>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:9px; padding:3px;width:100%;'> <right><img alt='vTechTip Facebook Comments by www.vtechtip.com' class='icon-action' height='16' src='http://static.ak.fbcdn.net/rsrc.php/z6IY3/hash/5gh7aaaq.png' title='vTechTip Facebook Comments by www.vtechtip.com' width='16'/><b><a href='http://www.vtechtip.com/2010/07/facebook-comments-form-for-blogger.html' target='_blank' title='Computer Video Tutorials'>vTechTip Facebook Comments</a> <a href='http://www.vtechtip.com' target='_blank' title='Computer Video Tutorials'> Get Yours?</a></b></right></div>

Done!

More Options:

1/ You can change http://lh3.ggpht.com/_t2Z6nkGKLVc/TDKRPBXI_KI/AAAAAAAABc8/-FB8TnZPh0E/Facebook%20Comments.png to your own image.

2/ You can manage this comment form by click at Administer Comments. You can add an admin, a moderator, add an user to blacklist, allow anonymous comments etc.

   3/ numposts='15' width='600', with numposts is number of comments in one page, width is width of comment form.

    4/ You can hide default comments form of blogspot by go to Settngs > Comments > check Hide option.

   5/ Please don't remove my credit info, I will very appreciate that!

You can see live demo here.

1 comments
Categories: Blogger - Blogspot, Facebook, Script, Tips Tricks

Install Facebook XFBML For Your Blog XFBML is more flexible than iframes, but requires you use the JavaScript SDK. When use XFBML, you can add any Facebook Social Plugin without any iframe code.

Example, when install Like button for your blog, you must use this iframe code:

And if you want install it for all page of Blogspot, you must use <b:if> code and more! But with XFBML, you just paste this code:

<fb:like></fb:like>

     Simple, isn't it?

     And when use XFBML, you can edit code options with ease and can use more function as thumbnail (which iframe do not support).

     Now, install XFBML with this easy step:

     1/ Open your template, search:

<body>

2/ Paste this code after it: NOTE: you should paste right after body tag, if not the code may not run properly.

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : '130803183627286',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml : true // parse XFBML
    });
};

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

DONE!

More Options:

At red number in this code, you can change this number to your own, it's define which name of application will be displayed in facebook. Example:

At this picture, the application is Full Software, you can create a application with name of your website by go to http://developers.facebook.com/setup/, fill your site name, url (must end with slash - "/", ex: http://www.vtechtip.com/) and locate. Then you will receive your app id at

Copy this App ID and replace red number at above code.

Now you can use Facebook Social Plugin with simple code as <fb:login-button> <fb:like> <fb:like-box>. View more about Facebook Social Plugin at: http://developers.facebook.com/plugins.

0 comments
Categories: Blogger - Blogspot, Blogging, Facebook, Script

Recent Posts Widget With Thumbnail, Summary for BlogSpot This is the best Recent Posts Widget ever, with all info about post and fully customize for you. All errors are fixed, add more features and fast loading.
Features:
- Show/Hide Thumbnail.
- Show/Hide summaries.
- Show/Hide date posted.
- Show/Hide comment quantity.
- Fully customize color border, image size, and text color, size, font.
- Display random thumbnail for post that not contain image.
- And much more! You can understand that when you actually install it.

Now, Let do it!

SETUP - INSTALL:

1/ Activate Full Feed in Blogger. Go to Settings > Site Feed > Allow Blog Feeds > choose Full in dropdown menu. Select Full will syndicate the full content of your post. Reader can read all your post in feed without visit your site. If you don't do this step, Recent Post can not display right thumbnail of your post, and display random thumbnail.

2/ Go to Layout > Page Elements and Add a widget, then paste this code:

Explain:

imgr[0] = random images url.

showRandomImg = true if you want use random images, false if no.

tablewidth = width of the widget.

cellspacing = Space between cells (default one is good)

borderColor = order color (add the background color of your template to perfectly blend it in the template)

bgTD = background color of widget.

imgwidth and imgheight = width and height of thumbnail.

fntsize = font size.

acolor = color of the title.

aBold = do you want to bold title? (true or false)

icon = change icon before title. Can leave blank.

text = text stand for comment (may be cm, comments, comment(s) etc.)

showPostDate = do you want to show post date (true of false).

summaryPost = amount of characters of summary.

summaryFontsize = font size

summaryColor = font color.

icon2 = icon before summary, can leave blank

numposts = amount of post display in widget.

rc_feedLink = Your blog feed url. Default is http://www.yourblogurl.com/feeds/posts/default. If you want only show recent post from specific label, you need change url to: http://www.yourblogurl.com/feeds/posts/default/-/LabelName. Ex: Use http://www.vtechtip.com/feeds/posts/default/-/Video to show recent posts from label Video.

<script type="text/javascript" src="http://sites.google.com/site/vtechtipcom/home/vtechtip_recentpost_thumb.js"></script>: this javascript is stored in my site. it is STRONGLY Recommended to download the script and upload to your own hosting (google for free javascripts hosts) and replace that url with yours.

DONE! You can see demo here: http://test.vtechtip.com/2009/11/recent-post-with-thumbnail-for-every.html.
If you need support, feel free to comment, thanks!

3 comments
Categories: Blogger - Blogspot, Script, Tips Tricks, Widget

Prevent Visitor Right Click and Select at Your Blog
Sometimes you don't want people who visit your blog can not right click or select any thing. Follow the step you can do this. Just copy and paste these code below. Where you can paste these code?

- On a new Widget (with Blogspot, Wordpress,...)
- On a new post that support javascript (Blogspot) - With this, code only work with single post.

- On a template (between <body></body> tag)