I have added on my web-sire some social buttons. Tweet share button works just fine but I have some issues with facebook and google+ button.
In fact I added this away the buttons : (the buttons are supposed to link to a web page through a parameter $URL
<div class="g-plusone" data-size="medium" href="{$URL}"></div>
and for facebook
<iframe src="http://www.facebook.com/plugins/like.php?href={$URL}&layout=button_count&show_faces=false&width=90&action=like&font=verdana&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 90px; height: 21px;" frameborder="0" scrolling="no"></iframe>
In fact I used iframe because my buttons are wrapped by divs that displays them in grey and color them the expected way on hovering.
The problem I have is that when clicking on the g+ no box appears, and when I click again, the g+ button displays a red triangle instead and I have a "+1 button errors" message : but I am in none of the case that would explain this kind of message.
When clicking on the facebook-like, I have nothing displayed on my facebook's wall...
Does anybody has an idea how to fix it ?
For the +1 button, I have a few things you can try. Is the actual button itself rendering also or are you getting unexpected behavior when you click it?
If the button isn't rendering, you might be missing the JavaScript library for Google+. The following code should be added to your post before the actual button gets rendered:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
If you are getting unexpected behavior when the button is clicked, you probably are having an issue with the URL parameter. You might be able to get by without passing a URL because the +1 button defaults to the current page. The following example shows the simplest case of rendering the +1 button for the current page:
<g:plusone></g:plusone>
If that correctly renders, you are putting something bad into the URL parameter or have something wrong with the strings in your parameters. For example, check that the strings you're using don't have backticks in the starting or closing quotes as opposed to single quotes.
The +1 documentation will have any additional details that you will need for configuring and customizing the button and its parameters. You can find it here:
https://developers.google.com/+/plugins/+1button/
Related
I have deployed my first page in Sitecore. But it is not rendered perfectly in Content editor preview mode.
Original html:
There is a nav menu and a banner below it. Behind them is a white transparent overlay & behind the overlay is a graffiti background image.
View from Experience editor:
The settings icon went offset. The white overlay is now above the Sitecore menu preventing the edits.
Error in browser console:
Uncaught TypeError: element.dispatchEvent is
not a function - prototype.js:5734
Uncaught TypeError:
element.attachEvent is not a function - prototype.js:5653
View in Content Editor:
It is rendered as if for a tablet, as you see the menu got shifted to the icon. I understand, it is because of the dimensions of the preview panel.
But, if this is the case, how will an author be able to edit/view the correct design.
Prototype.js is not a file being used by the site. So, it must be from Sitecore's.
Im guessing , certain CSS props, aren't being respected (Like position, transformnation).
Is this a bug. How to fix this. I have checked in different browsers (IE, chrome & firefox). It's the same
It looks like you are running into a conflict with prototype.js. Sitecore uses this in the experience editor.
If you are using jQuery in your site, there is a kb article about that here: https://kb.sitecore.net/articles/286042
To fix the issue, you need to run jQuery in no conflict mode. There are a few ways of doing that. Here is a simple example:
<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>
You can find more on the jQuery website: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
You also need to be careful with your CSS - don't absolutely position elements to the top of your browser, always make sure they are relative to a container so that the Sitecore EE DOM elements can be added and positioned correctly.
At the moment i'm building a website in sharepoint, but everytime i open the main page of the website in my browser the control panel on the left upperside of the screen is missing. I have no idea why?
To clarify: In this tutorial you can see the browse/page/site control screen, in which they make nearly all the simple changes to the website. https://www.youtube.com/watch?v=dJlwCNXMCBo (edit: Forgot the link of the tutorial)
I literally have no idea why i cant use this, does anyone have any clue?
Edit: My mainpage looks like this:
http://s30.postimg.org/6a5mkzoip/Screenshot_main_page.png
Pull down the menu with the gear icon beside your name. Click on "Show Ribbon".
Your master page is hiding it through javascript.
<script type="text/javascript">
var suitebar = $("#suiteBar");
if(suitebar.length<1)
$("#s4-ribbonrow").css('display','none');
</script>
If you change the master page to $("#s4-ribbonrow").css('display','block');
You should see the ribbon.
I've been translating a theme by simply customizing the HTML, but I've run into a problem:
The "Add to cart" button on a product page. I can translate the label on the button, but when you click the button the text changes from "Add to cart" to "Adding..." and then to "Added!".
Neither "Adding..." nor "Added!" are anywhere to be found the HTML of the theme, so I'm wondering where I should look if I want to translate those?
The "Adding", "Added" response comes from the theme's javascript - unfortunately that's hard-coded in and there's not a way to change it. You may want to try modifying another theme that doesn't use ajax to add products to your cart, like Sexy, Luna, or Nova - then you should be able to have more control over translating your store completely.
Is facebook 'like' only button (without counter) no longer possible?
How do I shut off the counter +'comment-bubble'? works g+,pinit etc - on these I easily using their HTML5 code generators create asyncronous buttons without counters - don't show any counter - see www.LazyBee.biz for clarification.
Any ideas?
How do I fix this code so no counter is shown (see under comments below):
Wwhy can't facebook do like all other major social players and let user opt out of the counter-swamp?
I have seen some people put the like button in an <div> and then make the width exactly the width of the button (without the counter) and put overflow: hidden in the CSS for the div. Basically the div acts as a matte of sorts.
Sure, just create a button yourself and use the API to initiate a like. See also How to trigger Facebook like button from custom button?
It is possible to generate the Facebook like button without the counter bubble.
In the code that Facebook's generator gives you there will be a parameter called data-layout, depending on the options you selected it will be one of four things: standard, box_count, button_count or button.
If you use button it will generate a single button with no counter.
EDIT:
I just noticed your comment with the code supplied by Facebook. If you change it to the following it will remove the counter:
<div class="fb-like" data-href="lazybee.biz " data-width="30" data-layout="button" data-show-faces="false" data-send="true"></div>
I'm having a weird problem on this page www.vivopositivo.it/media/foto/guarda-chi-sorride-over-18-e-famiglie/ with the like button. I'm using PrettyPhoto to include the pictures from Flickr and open them in a lightbox. Each picture has it's own like button which shows in the lightbox and uses a specific URL such as:
http://www.vivopositivo.it/media/foto/guarda-chi-sorride-over-18-e-famiglie/#prettyPhoto[pp_gal]/1/
where the number in #prettyPhoto[pp_gal]/1/ is the key for the specific image.
The like buttons are included with the following code:
iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true" /iframe
where {location_href} gets replaced with the image specific URL.
This works for most of the images, but for some of them doesn't! They seem to get the like counter of the page instead, therefore, I get about 10 images which show the same 128 like counter which is obviously wrong. This seems completely random..
Do you have any idea on how to fix this?
Cheers,
Andrea
This is because of # in URL which identifies the image.
Please refer to this post for further explanation.