I am an amateur web designer / app builder and am very new at all of this, though I have learned quite a bit over the past couple of weeks.
As the title says, I am attempting to build Social Networking share links / buttons, particularly Facebook, Twitter, LinkedIn and Google+ (for a website, not an app). I am using my own graphics for each button.
I have gone as far as purchasing the Social Media Tool Kit from WebAssist for $19.00 (USD), and much to my dissapointment, the script / extension isn't implemented as I wish it was. It screws up the size of my table, it is difficult to edit, and I have no control over the javascript. Technically, it gets the job done, but it doesn't seem very efficient, it isn't user friendly, and I have minimal amounts of control over it. Additionally, the Google+ button hasn't shown up once, no matter what I try.
I have searched the web through and through and have found an abundant amount of free javascript for creating these links. Sadly, most of these don't make any sense to me, nobody states where to insert the meta tags, and none of the code is explained.
Basically, I am looking for someone to help me build the code for these buttons. I don't care which format it is in (know that I am developing in XHTML1.0 Transitional), as long as it is efficient and doesn't contain any unecessary code. I need to be able to modify everything, particularly information such as that which shows up when you share on facebook (the URL, Image and Website information).
So far it seems like the best way to do this is to have a javascript file, and have the share button related to that file.
If you post any code, please explain everything to me!
Any help anyone can give me will be greatly appreciated!!! Thank you!!!!!
Just to start off, some of these social buttons do not allow you to use custom images if you want the full functionality of the script (eg: counter). And some, depending on what you want will require you reading up on the API documentation for each button and customizing the code to your liking. I'm going to try to break your post down a bit to figure out what the root of your problem is and how to point you in the best direction.
Sadly, most of these don't make any sense to me, nobody states where to insert the meta tags, and none of the code is explained.
What doesn't make any sense? I don't think any of these require editing meta tags so what are you referring to there? Can you give us examples of what you would need explained that doesn't make sense to you?
I don't care which format it is in (know that I am developing in XHTML1.0 Transitional),
This won't make much difference in the end. For instance --> <img ... /> for XHTML, <img ...> for HTML and a bunch of minor differences, in the end it's whatever your page is set to it can be easily programmed to.
I need to be able to modify everything, particularly information such as that which shows up when you share on facebook (the URL, Image and Website information).
Very possible and shouldn't be hard to implement. What types of information are we talking about? Is there a backend (eg: blog admin page) where you type the content where it should be generated or entered by the user? To further expand, what are you trying to add this to: a cart, a blog, custom script? The more details you can provide the better.
So far it seems like the best way to do this is to have a javascript file,
A lot of the buttons require javascript but most users have this turned on in their browser so it shouldn't be an issue.
Thank you very much for your reply SnakEyez!
Time to try to answer your questions.
In regards to customization: I don't want to use any counters (I just want to use simple icons for each button), and I update the website using Dreamweaver, I am not using any sort of back end server or database. The only customization I intend to do is probably for the facebook button / script, so that I can choose the image that shows up, the URL and the description of the site. I don't have any intention of blogging or anything else. Just simple buttons to share my site on the 4 social networking sites I mentioned. I don't plan on adding a cart, blog, or anything else. Just 4 buttons on the top of my page that link appropriately to facebook, twitter, linkedin and google+.
What doesn't make sense to me: None of the code I have found has anything really explained (what each line means / does) so therefor, I have no idea what to edit and how to edit it. I haven't done too much extensive research on Google+ and LinkedIn. After getting stumped on the other two, I came straight here. Here is an example of a great piece of code, but I don't know how to edit the information that pops up on facebook:
<a href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)" title="Share on Facebook..."><img src="/path/to/your/image/" width="12" height="12" alt="alt" /></a>
Also, here are some links to some sites with code that I have been looking at:
http://cookbooks.adobe.com/post_Facebook_share_button_in_AS3_without_e xternal_Java-17581.html
http://machoarts.com/share-button-codes-of-facebook-twitter-delicious- digg-and-stumbleupon
http://www.vbseo.com/f34/facebook-twitter-digg-share-button-scripts-45 812/
Thank you again for replying and I hope I clarified everything. If you have any more questions please do ask and I hope you can continue to help me!
Curtis_E_Flush wrote:
They have FREE social networking buttons, 100% customizable (you choose which buttons to leave out from their selection, and you can set the size from preset or (if you do a little twekaing) you can set to ANY sixe you want.
Thank you very much for this Curtis, but sadly the "Get the Code" button isn't working so I can't even check to see if it is what I need or not.
Any further answers from anyone will be grealty appreciated!
Curtis may be a spammer.
I have used a lot of WebAssist plugins for a while but I have not installed any at all into Dreamweaver 5.5. I kept getting frustrated with the way they want to do things for customization.
Each of the social sites has its own API (Application Programming Interface) and wants you to do different things. For most of my clients, I'm simply putting a logo on the website and making that logo into a link thusly:
<a href="http://www.facebook.com/pagecode" target="_blank"><img src="../images/IconFacebook.png" alt="Follow me on Facebook!" width="30" height="30" border="0" align="left" /></a> Follow Client on Facebook!</p>
<p><a href="http://pagecode.blogspot.com/" target="_blank"><img src="../images/blog_logo.png" alt="Follow my Blog" width="30" height="30" align="left" /></a>Read Client's Blog!</p>
I use honest-to-goodness logos for these that I searched for using Google: "logo Facebook," "logo Twitter," "logo Blogger" etc.
Those logos are hosted in my /images folder on the various websites I manage.
While I think it's handy to program to an API to get people to follow someone's Twitter or Facebook account, I have found that most people don't want to just follow someone, they want to see the actual information being released about the person or company first.
Curtis E. Flush <------------NOT A SPAMMER.
I use AddThis a lot. I don't work for them, I don't work for Adobe, I don't work for Facebook, I don't work for Twitter (don't even use it), I don't work for LinkedIn, StumpleUpon or any of the other social networking sites.
I just think it's ridiculous to pay $19.95 for something (that isn't working) that's FREE somewhere else and may or may not work just as well without the expense.
My apologies, Curtis. The original poster said that the "Get the Code" button isn't working.
As I stated, I am easing WebAssist out of my plugins; The last I used was CSS Menu Writer and, when I found it next to impossible to get an image-based drop-down menu to work, I went to Project 7. They also had a Google Maps plugin that would position an address on a Google Map, but was not as useful as Google's own iFrame-based method, so after one use of that, I quit using it.
Thank you for your responses mhollis (And Curtis isn't a spammer, he has helped me before lol).
In regards to the API's, how can I just find out what the API address is and link my button to them? Though with facebook I would still need to know how to edit the information shown when someone shares my site. Or am I just not understanding API's correctly?
And in regards to Twitter, I am not trying to get anyone to follow me on Twitter (I dont' have a twitter account either), I want a share button so somone can click on it, it brings them to their twitter page where they can then share my site.
Any additional information will be greatly appreciated as I am still lost!
"And in regards to Twitter, I am not trying to get anyone to follow me on Twitter (I dont' have a twitter account either), I want a share button so somone can click on it, it brings them to their twitter page where they can then share my site."
That's what AddThis will do.
DId you try it in only one browser?
I know that IE 8 on my netbook will not respond on their site. (can't get code - can't even preview the buttons), but Firefox will, and so will Opera.
Curtis, I just got the link to work and it will do for now. At least the buttons will be there when I launch the site. Sadly, the google+ button isn't showing up just like with the one I payed for, but there is a link to get the code for just that button, but now that page isn't loading!
I will keep trying but I am still hoping for a better answer! An internal java script, not something that runs off of another server.
jSocial is available for free from the Adobe Widget Exchange.
You'll need to log-in with your Widget Browser to get it
http://labs.adobe.com/technologies/widgetbrowser/
You can see the jSocial icons on top of this test page (only twitter is linked here)
http://alt-web.com/GALLERY/Photo_Gallery.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Oh, I missunderstood what you're after.
Look at jQuery Share plug-ins
http://plugins.jquery.com/plugin-tags/share
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
I sought some external help, and we came up with the appropriate Javascript file and HTML code.
The proper coding can be found here in the cookbooks: http://cookbooks.adobe.com/post_Simple_social_networking_share_buttons -19482.html
North America
Europe, Middle East and Africa
Asia Pacific