When you add social media buttons to your site from Google+, Facebook, LinkedIn etc., they often contain a lot of homemade attributes and other things that don't validate.
I have fourteen errors on this page in the validator just because of social buttons.
Are there any tricks to make the page validate?
As the buttons will only work for users with Javascript, the simplest thing you could do is to insert them via javascript. Then your page will validate again.
Beware of the privacy issues of "social spying buttons". It is a good pracitise to not automatically load them, but just show a placeholder image, and load the actual button when the user has clicked it. These are the so called "2 click likes". First click to enable transmitting your data to Facebook, the second click to like.
An incorrect HTML version causes most of the errors - the social buttons are using data- attributes, part of HTML5, but the page has been validated as HTML4.
Sorting the doctype should fix a bunch of those errors.
Related
I've recently created an app for a client where they want separate like buttons next to each of their products. The like buttons are the iframe variants and use a unique URL to the app to separate the products.
The like buttons require the "confirm" action and has done so since the beginning, something which the client (unsurprisingly) isn't very happy with. Is there anything that I've done to cause the like buttons to react this way (iframe inside iframe, testing by liking/unliking URLs quickly, CSS styling that seems mischievous, etc.) and what can I do to fix it?
I've tried running the URLs through the URL debugger (example) but it doesn't solve the problem or show any errors/warnings.
The app in question: https://www.facebook.com/Smash.sjokolade/app_567454876598963
The "Confirm" on the Like Button is a security feature Facebook has put in place to prevent Like-jacking / click-jacking and getting users to Like spam / malware sites. You may see it occasionally on new domains / apps.
However, there is no way to turn this off. It will go away after a number of legitimate likes have been made on the domain / app. Until then, you'll just have to wait it out.
I will try to explain a bit the context for my problem.
Context:
A while ago I started working on Facebook application. One of the requirements is to be included in a Facebook page as a tab. This application will contain on a page a send button in order to be able to make it more engaging with specific people, users of the application would choose on their own. The reason behind this is because the Facebook page containing the application is related to alcohol, and "liking" the application will get more audition and potential children. Another reason for using send button rather then other similar options from Facebook (like send dialog etc.) is because in Facebook documentation was stated that send button works on mobile devices and other options don't.
Problem:
My problem is related to the send button. What I need is to be able to completely configure the send button: url, image, title, description. I have research the open graph tags in order to be able to do this. Everything works fine if the page I want to be sent with the message is a website OUTSIDE Facebook. Once I started to use the url of a Facebook page (let's call it www.facebook.com/mycustompage), then the crawler takes the images, title, description from facebook.com ignoring the actual page and the produced message is not what I want.
I have searched a lot to better understand this limitation and could not find anything relevant.
The only article I could find as a potential solution was (and even this I had trouble finding):
Send button returning error codes, like button works fine
The above discussion is a workaround which I have already put in place but is not 100% what I want. The described workaround is about putting in the send button:
<div class="fb-send" data-href="http://www.mycustomdomain.com/og"></div>
a page that sniffs the user agent. In case the user agent is Facebook crawler to serve an html empty page just with the open graph tags, otherwise redirect to the desired URL - which in our case is the facebook page www.facebook.com/mycustompage.
The message produced contains:
the title which is a link to www.mycustomdomain.com/og which when
clicked opens a page in a new tab with the address
www.facebook.com/mycustompage - this is relatively ok
under the title I have a "sub-title" readonly text containing the domain of the link: www.mycustomdomain.com - THIS IS NOT OK since I don't want to share where I have hosted the application.
the image and the desired description - this is ok.
Conclusion:
What I want to know if there is a better way to do this rather than this workaround.
If not I would like to know how I can hide for the produced message the "sub-title" so that the hosted domain is not visible.
I am usign the version of based on the <fb:like > tag. This renders a small facbook logo which implements the actual "like" operation, but also includes a large "signup to see what your friends like", or the number of likes when you are logged in, etc. It is pretty clear from what I have read that this is the form facebook wants you to use, but it makes the button to wide for my layout. The point is that I see other versions on websites all over, in particular "the weather channel" has one that includes only the logo with some text such as "like us" next to it. "Chicago Tribune" has one that says "recomend" with a very small like count next to it. I have not been able to determine what these link to or what script they invoke so that I can copy them. Can anyone help ?
when you get the code of the like button from facebook you can play with the options and get different results: http://developers.facebook.com/docs/reference/plugins/like/.
obviously it's limited to how facebook wants it to look like.
it is possible to change the look with css, but that's not wise since it's against their policy and you'd have to keep track with their changes.
Basically i'd like to put a like button on the website so that fans of the site can like the websites Facebook page.
The Like button page doesn't give me the code when i click the button, just says "Only verified developers can be added as listed developers of this application. Read www.facebook.com/help/?faq=17580 for details." Is this a common error, or?
EDIT: Using Like box now, but would prefer Like button.
And the like box page gives me the iframe and XFBML codes. Sorry for being a n00b, but how do i add either one onto my site? I've tried Insert > Script and pasted it in there, using all four script types (Javascript, JS 1.1, JS 1.2 and VBScript but they don't show in the preview. Placed the code under the 'back to top' button at the bottom of the page. Not showing up when i look at code view of the online version though?
Hopefully its something really easy and obvious, but any help would be great.
Again, site is designed/updated with Dreamweaver MX 6.0.
I dont have that much experience with Dreamweaver - but implementing the facebook social plugins (eg. Like button) is very simple. All you have to do is copy and paste the XFMBL you generate from this link. Once you paste your URL into the "URL to Like" field and click "get code" you should get the correct code to use...
You place this code wherever you want it to appear - if you want the like button to be in the footer just paste it there...
The code snippet actually loads the facebook javascript sdk and places your like button inside an iframe on your page...
You can not place the like button code inside a different element - if that were possible people could trick you into liking their page by writing some different label on the button - eg. "Back to top" :)
This should be relatively simple to implement. If you are still having dificulties - why not try opening a new HTML file containing only the required HTML tags and the like button code...
Hope this helps!
Good luck!
The error appears because, just like it says in the message, you are not a verified developer.
In order to be a verified Facebook developer, you need a verified Facebook account, with a credit card or a phone number verification.
I'd suggest you verify your account as soon as you can if you plan to use more of Facebook's plugins and apps, since it will give you full access to their developer tools
I'm adding social media buttons to my website. Facebook like, Twitter tweet etc buttons were very easy.
However I also need an email the page (or rather a link to the page) button. I have trawled the internet but cannot find a simple and good implementation.
Ideally I'd like to be able to copy some reliable code, and have the button look in the same style as the ones on this page: http://dl.dropbox.com/u/6920023/testbuttons.html
If anyone has done this before I would be very glad to hear from you :)
Thanks in advance.
Why not just use the AddThis service? You simply register, provide them with your website url and then select the social media / link mechanisms you would like to use on your site. At the end they provide you with a block of HTML code to drop into your site and low and behold, the buttons and appearance you selected will be present. You can also select mechanism such as pain old email when setting it up.
An example of it in place;
Here's the link: http://www.addthis.com/
As far as i know, you will have to use Mailto: apart from doing some deep Gmail, Yahoo and Hotmail API integration. That's about as good as your going to get.
You can dynamically fill out subject, body, cc fields etc using javascript/php (or whatever you are using)