|
JavaScript - Facebook Like Button
Hey I'm looking to create a button like Facebook has that just says Like. Since I have little JavaScript experience I was wondering if anyone could point me towards a tutorial or code me one. I could do it with just a link and PHP but I want to use Ajax.
http://venturebeat.com/wp-content/up...ike1020909.png Similar TutorialsI have three divs, Step 1, Step 2, Step 3. I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2. Any thoughts? Code: <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br />
<iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
<br />
</tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br />
<a name="fb_share" type="button" share_url="LINKHERE"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
<br />
</tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br />
<center><a href="LINKHERE">Download Here</a>
</center></tr></td></table></div><br />
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function() {
document.getElementById('Step1').style.display = 'none';
document.getElementById('Step2').style.display = 'block';
document.getElementById('Step3').style.display = 'none';
setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000);
});
};
(function() {
var e = document.createElement("script");
e.type = 'text/javascript';
e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
</script>
I've been told by many reliable sources that getting people to 'like' your site on Facebook is a great way of increasing your site traffic and getting a site ranked higher on Google and other search engines. However, it is hard work to get it implemented correctly. What you want is to have each page individually 'liked' rather than the site as a whole. To do that can take a lot of time-consuming fiddling around. We've created a simple piece of Javascript that allows you to create a custom 'like' button on each page of your site. Because we've had some help from other members with some bits and pieces of Javascript coding, it only seems fair to share something in return. Prerequisites You will need to get a Facebook Application ID from Facebook themselves. This is a unique Application ID for your domain. The easiest way to get one of these is to go to http://developers.facebook.com/docs/.../plugins/like/ and enter the details for your domain. Then click on 'GET CODE' and copy the 15 digit number from #appId. You then paste this into the Javascript as shown below. Adding the Facebook 'like' button to each page - changes to HTML In the <head> section of your HTML, add the following piece of code: Code: <script type="text/javascript" src="SocialMedia.js"></script>
<script type="text/javascript">
FacebookSetup('Your page title goes here', 'image-to-show-on-Facebook.jpg');
</script>
At the point on the page where you actually want the 'Like' button to appear, you then add the following piece of code: Code: <script type="text/javascript"> FacebookLike(); </script> The JavaScript Now create a JavaScript file called SocialMedia.js: Code: var facebookAppID = "xxxxxxxxxx"
function FacebookSetup(title, image)
{
var url=window.location.host + window.location.pathname;
document.write("<meta property='og:title' content='" + title + "' />");
document.write("<meta property='og:type' content='article' />");
document.write("<meta property='og:url' content='" + url + "' />");
document.write("<meta property='og:image' content='" + hostname + "/images/" + image + "' />");
document.write("<meta property='og:site_name' content='" + sitename + "' />");
document.write("<meta property='fb:admins' content='" + facebookAppID + "' />");
}
function FacebookLike()
{
var facebook="http://www.facebook.com/plugins/like.php?href=" + url + "&layout=standard&show_faces=false&width=250&action=like&font&colorscheme=light&height=35";
document.write("<iframe src=" + facebook + " scrolling=no height=35 frameborder=0 style=border:none; overflow:hidden; width:250px; height:35px; allowTransparency=true></iframe>");
}
Change the value in the variable facebookAppId on line one to your Application ID (as explained in the prerequisites section above). What happens once you've implemented this? Once you've implemented this, you should see a LIKE button on your page. If you are a Facebook user and have cookies set to always log you in, you'll find that when you click on this LIKE button, a link to your page will appear on your Facebook page, along with a thumbnail photograph as specified by you when you called FacebookSetup in your HTML code. Other people who follow you on Facebook will then also have the link to your site appearing on their News Feed. If you are not logged in when you click on the LIKE button, you will be prompted to log on to Facebook before the information appears on your News Feed. What are the benefits of using JavaScript to do this, rather than writing the HTML code for each page? Many sites have created a blanket site-wide 'LIKE' button and embedded it into their HTML. Whilst this is easy, it is limiting - the LIKE button always has the same title, the same picture and sends you to the same page on your website. Of course, it is possible to write custom HTML for each page, but this can soon get messy and then becomes more difficult to maintain. As an alternative, this JavaScript is simple and tidy. The code makes it simple to create unique Facebook 'likes' for each page, with custom text and custom images. It also keeps your HTML tidy, thereby making it easy to maintain in the future. Hope this helps, folks. On this webpage http://www.corkdiscos.com/testimonials.html i have a like button. when a user clicks like a comment box appears. when i unlike the button the comment box disappears this is ok but when a user has already liked the facebook page and comes to my webpage the comment box does not show. so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box. please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far. any help would be greatly appreciated Hi all, I use a forum hosting provider called forumotion and they have a chatbox feature on it. When a new message arrives I would like it to say so in the browser tab like facebook does. Here is the current code I am using: Code: <div id="fbfcbframe" style="display:none;background:white;padding:0px;position:fixed;bottom:25px;right: 23px;border:1px solid black;width:900px;"><div style="font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px;background-color: #526EA6;margin:-1px;margin-bottom:0px;padding: 4px 8px 5px;color:white;border-bottom: 1px solid #526EA6;border: 1px solid #254588;text-align:left;">Chat | <a href="http://www.thefacebookforum.net/Chat-Rules-and-Reminders-h22.htm"><font color="white">Rules and Reminders</font></a> | <a href="http://www.thefacebookforum.net/Chatbox-Reports-h33.htm" title="Submit your report"><font color="white"> Make a Report</font></a> <div style="height:16px;width:16;text-align:center;cursor:pointer;position: absolute;right: 5px;top: 2px;" id="minimize" onClick="this.parentNode.parentNode.style.display='none';document.getElementById('fbfcb').className='unclicked'"><div style="margin-top:10px;background-color: #ADBED8;float: right;height: 2px;overflow: hidden;width: 9px;"></div></div></div>
<iframe id="cbframe" src="/chatbox/chatbox.forum"></iframe></div><script>document.getElementById('fbfcbframe').childNodes[1].onClick="document.getElementById('fbfcb').click();return 0";function toggleframe(){var x=document.getElementById('fbfcbframe').style;if(x.display=='none'){x.display='block';}else{x.display='none';}}</script><div id="fbfcb" class="unclicked" onClick="toggleframe();if(this.getAttribute('class')=='unclicked'){this.className='clicked'}else{this.className='unclicked'}"><img src="_.gif" style="width:16px;height:16px;margin-bottom:-2px;position:relative;bottom:-5px;left:-3px;background: transparent url(http://static.ak.fbcdn.net/rsrc.php/z3O30/hash/3wq3vjh4.png) no-repeat scroll -631px -101px;"> Chat</div>
<style>
#cbframe{border:0px solid black;height:290px;margin:-2px;margin-bottom:0px;width:900px;background:transparent}#fbfcb{width:188px;cursor:pointer;padding:3px 12px;background:url(http://static.ak.fbcdn.net/rsrc.php/z1V2B/hash/apfsevhg.png) repeat-x 0px 0px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px;padding-bottom:6px;border-top:1px solid #b5b5b5;border-right:1px solid #b5b5b5;border-left:1px solid #b5b5b5;-webkit-user-select:none;text-align:left !important;position:fixed;bottom:0px;right:23px}#fbfcb:hover{width:188px;cursor:pointer;padding:3px 12px;padding-bottom:6px;background:white;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px;border-top:1px solid #c5c5c5;border-right:1px solid #c5c5c5;border-left:1px solid #c5c5c5}.clicked{background:white !important;border:1px solid black !important;border-top-width:0px !important}.unclicked{}#minimize{height:16px;width:16;text-align:center;cursor:pointer;position:absolute;right:5px;top:2px}#minimize:hover div{background:white !important}
</style>
<span id="cbalarm"></span>
<script type="text/javascript">
var cbmp3='http://fsb.zedge.net/content/2/3/3/3/4-813701-23333571.mp3';
var cbverif=1;
var cbbegin=3;
function getlastcb(){
if(jQuery('#cbframe').contents().find('#chatbox > p:last-child').length==0) return '';
else return jQuery('#cbframe').contents().find('#chatbox > p:last-child').html();
}
function checkcb(){
if(getlastcb()==oldcb) return;
oldcb= getlastcb();
if(oldcb=='') return;
jQuery('#cbalarm').html('<object id="cbalarm" type="application/x-shockwave-flash" data="http://www.fileden.com/files/2010/6/2/2877694//dewplayer-mini.swf" width="0" height="0" style="visibility:hidden"><param name="movie" value="http://fsb.zedge.net/content/2/3/3/3/4-813701-23333571.mp3" /><param name="flashvars" value="mp3='+cbmp3+'&autoplay=1" /></object>');
}
setTimeout("var oldcb=getlastcb();setInterval('checkcb()',cbverif*1000);",cbbegin*1000);
</script>
I know it is messy, it is to prevent rippers on forumotion. I'm sure there are people here who are familiar with the Facebook javascript library. It's pretty straight forward, but I'm having one issue with my program and I don't see the best way around it. I have two logins for my website. A user can log in with their facebook, and it's encouraged as I'm implementing facebook features through out it, but I also need to have a very strict control over who is able to actually modify the database. Basically, if a user comes to the site and logs in with facebook, I check for their email, if it doesn't exist, an account is created, but it's level one and theres also an isReg field that's set to 0. If the email address is already found, I simply add the facebook data to the existing account. If a facebook user wants to become an actual client, I then send them through my traditional registration process. Pretty basic as far as facebook implementation goes. My problem, however, is with the facebook javascript itself. Since the program is mostly PHP based, I have the facebook login fire the script I talked about above, and it sets up the session variables I use to control who has access to what. The problem is after the ajax call, I need the page to refresh so it shows the user access stuff that's tied into the PHP program. The logout refresh works great, but as you can see with this code, if I put something like "window.location="ect"", it would send the browser into an endless loop. I need some advice on how to refresh this page so the php session stuff gets added after a Facebook login. Code: <script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '215993265079207', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function fbloginClick(){
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
},
{perms:'email,user_birthday'}
);
}
function login(){
//Fire the PHP Facebook Auth Script
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http://www.thehoppr.com/clients/facebook/facebook_auth.php",true);
xmlhttp.send();
}
function fblogoutClick(){
FB.logout(function(response) {
// user is now logged out
});
}
function logout(){
//Fire the PHP Logout Script
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http://www.thehoppr.com/clients/logout.php",true);
xmlhttp.send();
window.location.reload;
}
</script>
Anyone got any ideas for me here? how can i make one of these: http://likes.adstormer.com/ ?? is there a free script out there? So my mom owns a business and has a facebook page (for her business.) I want to know how to create a javascript that will make anyone who views her facebook page automatically like it. Is this illegal? Can anyone help? x em-jay x I have a facebook code script but I dont know if it is javascript or something else, the thing is it is not valid. Can anyone show me how to make it valid? <div class="rightside4"> <h3>Follow us on Facebook</h3> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like href="http://www.facebook.com/pages/Lewisham-Community-Transport-Scheme/186259418081861" show_faces="true" width="255" font="tahoma"></fb:like></div> I need a script that can go on someone's facebook profile and like everything, including all their photos and such and all of their statuses and comments on their statuses. I don't intend to use this for too terribly much evil, just winning a notification spam fight. Also, I'm a complete and total noob at scripting. Don't know where to start.
I have been working on this for four hours and none of the methods online have worked. Every site has outdated screenshots and I have nowhere else to turn. There's supposedly just a couple of lines of code and "3 easy steps" to allow me to have a Facebook comment box on any page of my site. I DO NOT use Wordpress or any blogging software / sites. I am working from scratch in Dreamweaver. What am I missing?
Hi, I'm trying to make a pop up window that should work such as the window the pops up when you press "View all friends" on one of your friends' profiles on Facebook. Is this possible? Thank you! First time poster. so be kind Hi All, I have found a bit of shared code on the net that can be used on Facebook. The way it is used is on profiles, or groups, that extend beyond an original page. You load the page and then paste the script into the address bar (in FF and chrome) and hit enter. This then goes down and looks for the 'older post' tag and expands it every 4 seconds. When it gets to the end of the group, it does not stop, it just goes into a loop and restarts from the beginning. I am wanting help to get it to stop at the end of the first pass. This is the code: Code: javascript:function clrt(){alert('Stopped Post Load');if(f_sM){clearTimeout(f_sM);}};function showMore(){ProfileStream.getInstance().showMore();f_sM = setTimeout(showMore, 4000); xsm=document.getElementById('profile_pager_container');xsm.addEventListener('click',clrt,false)}; showMore();
I have also seen it done, with the same looping results, with this code: Code: javascript:function showMore() {ProfileStream.getInstance().showMore(); setTimeout(showMore, 4000)} showMore();
Can anyone help please? Thanks Hi All, Im looking for someone that is great with java script and facebook i have a java app right now i want to add the feature to post to friends walls and so i can change that number as well so if someone clicks on the app the script all ready post to there wall but i want it to post to 15 - 25 of there friends walls over even all friends walls as well. Need these added asap i do have some java that does this all ready just need it added to the script Thanks Hello guys. I have a daily deal aggregator site and i can't get the Facebook share to work properly. There are lots of deals on each page and each one has it's own FB share so they can post it on their wall, friends walls etc. here is the site so you can try the sha http://bit.ly/xFGzj5 Here is the code Im using now: Code: <!-- Each Deal has this button that links to FB -->
<a href="http://www.facebook.com/share.php?u=<?php echo urlencode($shareurl); ?>" onclick="return fbs_click('<?php echo urlencode($shareurl); ?>','<?php echo $title; ?>')" target="_blank"><img src="../../images/fb.png" border="0" alt="Share On Facebook" class="smicon" /></a>
<!--And here is the JS function:-->
<script>
function fbs_click(u,t) {
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
With this method, right now the title is not working properly, and sometimes an image shows up, sometimes it doesn't. When an image does show there are about 200 thumbnails to choose from (depending on how many deals are on the page) so the user has to cycle through it until they find the right one. Ideally, I want the url/title working properly (obviously) and have the image go to that specific deal's image by default when they click the share button. Anyone have any ideas on how to make this work??? Thank you so much! Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hi, I'm wanting to do these types of sites: http://usa-fight.info/ but itll be legit, im trying my best to monetize and using coding to make the best converting/viral websites. i think this script does it that it automatically 'likes' and 'shares' [im not sure about 'shares' part but it auto 'likes' for sure when you click on the iframe] and when you click on the iframe the content gateway pops up. In helping me do this i can learn also and implement different things in the future myself (: but yeah, how can i create someting like this? and im looking forward to having some type of script that would automatically generate a new 'viral' website so i wont have the hassle of MANUALLY creating same-type of sites over and over and over again lol, i know theres sometype of program/script that would do that for me its just the matter of asking the right person that knows where to get something like that or having someone script it for me so i can learn from them as well. but yeah (: i guess those are mainly my questions right now haha. im a 16 yr old filmmaker who, with these skills i can potentially learn, can make viral websites for his [my :P] videos. Is it possible for me to get this: http://apps.facebook.com/shimmycocopuffsss/ without the need of 25K subscribers? i think this tool would GREATLY help my youtube channel go viral, and therefore giving me exposure for my film-making career. maybe someone can PM for this? buuut yeah, sorry kinda went off topic there :P but yeah, any help on this issue??! (: thanks! PS - i actually no pretty much nothing about javascript/coding for that matter. and im willing to learn, but right now my parents are in need of money and my internet marketing ventures will help them much, aswell for buying gear for filmmaking :P but yeah, my parents are in dire need of money. Hey guys, I have this site http://free-documentaries-online.com . If you go to any documentary page and look under the documentary you will see 'Share this documentary:' like the picture below. I was wondering if you could make all the pictures have a similar size image? facebook.jpg, twitter.jpg, linkedin.jpg, digg.jpg, stumbleupon.jpg, delicious.jpg Here is the code: Code: <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="freedocosonline">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script src="http://www.stumbleupon.com/hostedbadge.php?s=4"></script>
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">
<img src="http://free-documentaries-online.com/images/delicious.jpg" width="20" height="20" alt="Delicious" title="Add to Delicious!" /></a> <script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggIcon"></a>
<a rel="nofollow" target="_blank" href='http://www.facebook.com/sharer.php?u=http://free-documentaries-online.com/watch/index?watch=<? echo "$foldername"; ?>'> <img border="0" src="../images/facebook.jpg" width="20" height="20"></a> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share"></script></center>
Thanks in advance Hi to all! Dont know if this is the right place... I have the following jquery script, the function is to sow the submit button when the textarea is selected and dissapear when not. The script works fine, the only thing missing is that I need the box to automaticly adjust height upon lines inputed, same as the facebk web. Code: <div id=\"comments_container\">
<form method=\"POST\" action=\"\">
<textarea id=\"comment_\" name=\"\" rows=\"\" cols=\"\"></textarea>
<input id=\"submit_\" type=\"submit\" name=\"submit\" value=\"submit\">
</form>
</div>
<script type="text/javascript">
jQuery("[id^='comment_']").live('focusin focusout',function(e){
var commentText = "Write a comment...",
id = this.id.replace('comment_',''),
val = jQuery(this).val();
if (e.type == 'focusin'){
val = (val == commentText) ? '' : val;
jQuery("#submit_"+id).show();
} else if (e.type == 'focusout') {
val = (val == '') ? commentText : val;
if( val == commentText){
jQuery("#submit_"+id).hide();
}}
jQuery(this).val(val);}).trigger('focusout');
</script>
|
|||||||