Solved

Social Media Buttons

Posted on 2014-01-03
4
451 Views
Last Modified: 2014-01-04
I'm trying to add social networking buttons to an html page, following the directions here:

http://blog.hubspot.com/blog/tabid/6307/bid/29544/The-Ultimate-Cheat-Sheet-for-Creating-Social-Media-Buttons.aspx

I've attached the file I created based on that blog and links to developer tools on Facebook and Google Plus.

I don't have a website set up, so am just opening the HTML file in Internet Explorer.

The Twitter and Reddit buttons work, bringing up login pages for those sites, but the Facebook and Google Plus buttons don't work.

Questions:

1.  Am I doing something wrong in the code?
2.  Would those buttons work if they were on a real website rather than just my test HTML file?
3.  Why do the Twitter and Reddit buttons work when the Facebook and Google Plus buttons don't?
social-netowrk-button.html
0
Comment
Question by:mbizup
  • 3
4 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
Comment Utility
Hi mbizup,

1.  Am I doing something wrong in the code?

It's certainly possible given the instructions on that page are fairly unclear as the author goes into every possible permutation of social buttons.  So you may be conflating code from multiple sources...hard to say looking at the sample (q.v.)

2.  Would those buttons work if they were on a real website rather than just my test HTML file?

They would be different, yes.  The test file, especially a local one, doesn't have a fully qualified domain name (FQDN) and addressable URL and if the script being used to generate the button checks for that sort of thing, it would act differently.  You always want to test from a web server when possible.

3.  Why do the Twitter and Reddit buttons work when the Facebook and Google Plus buttons don't?

The Twitter button is just a simple link (<a> tag) so it will always work.  However, it will only show as a link because the CSS class "twitter-share-button" doesn't have a matching CSS file to work with.

The Reddit button is the same thing only combined with a full URL src'd image.  So that one looks and acts okay.

Google+ is using javascript to generate itself so it may not work from a local file preview but it should work fine on a real server (click your attachment above to see it work on EE's server).

The Facebook button is also using javascript to generate itself so it may need a full working server to be seen properly.  Additionally, you have a local image reference in that div: src="images/JFTIwebsite_logo.png" which will not work unless there is an image and a subdirectory present, so the button may be invisible on testing or on deployment.  Futhermore you have "data-href="http://www.HERPDERP.INSERTURLHERE.com"" in that div and if the Facebook script is testing for a header response from www.HERPDERP.INSERTURLHERE.com when it loads, it obviously won't get one.
0
 
LVL 61

Author Comment

by:mbizup
Comment Utility
0
 
LVL 61

Author Comment

by:mbizup
Comment Utility
Jason,

Thanks - great explanation (I couldn't have said it better myself ;-)  )

<<  (click your attachment above to see it work on EE's server) >>

Wow!  I never would have thought of that.

<< if the Facebook script is testing for a header response from www.HERPDERP.INSERTURLHERE.com >>

Double wow!  After my own failed attempts at this, I asked my son to take a stab at it.  I didn't notice that he had put what he called LOL code in there.  

As soon as I changed that to a real URL, it worked as an EE attachment -- see the attachment in my last comment.   (herp derp.)
0
 
LVL 61

Author Closing Comment

by:mbizup
Comment Utility
Thanks!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Follow these tips to boost your freelancing career. Soon enough you'll be enjoying the freedom of being your own boss and working from anywhere.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now