About a year ago on our page we included a fb:login-button that instead of simple text for buttons text it had a html element inside.
<fb:login-button onlogin="document.getElementById('buttonid').click();">
<span onclick="some_function();">Login with Facebook</span>
</fb:login-button>
The span element is required becouse there is an implementation that handles different clicks (if ctrl is held for example).
This has been working until around 5th June. I have tried to find any information on recent changes but had no luck.
Does anyone know if there is still a way to have html elements inside a fb:login-button tag?
Related
I have successfully embedded the facebook page plugin in my page, now I am trying to make it so the plugin only scrolls on mobile when 2 fingers are used, much like the google maps iframe embed. Don't even know where to start!
<div class="fb-page" data-href="https://www.facebook.com/<?=$siteFacebook?>" data-small-header="false" data-height='+fbHeight+' data-tabs="timeline" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/<?=$siteFacebook?>" class="fb-xfbml-parse-ignore">
<?=$siteName?>
</blockquote>
</div>
where $siteFacebook is the id of my newsfeed
As misorude pointed out, it's not possible to interact with the elements of an iframe, so I took a different tack. I overlaid the facebook iframe with a transparent div thus blocking any interaction with the iframe. on hover a message was displayed in the transparent div saying to 'click or tap to interact' (this also displayed on first touch interaction). On clicking the div (or second touch) it dropped the z-index of the transparent div behind the facebook iframe allowing the user to interact with the facebook iframe.
Just thought I'd add my workaround solution in case it points someone in the right direction in the future.
I am having a problem with my XSLT, I am using SharePoint 2010 and I am building a custom front-end that will pull data from lists and render the data in a nice manner. I have figured out how to use XSLT with HTML to render a SharePoint list, I wasn't able to add an image of my news feeds because my rep is too low but I will get it up!
Now here is where my problem starts:
I am using jQuery toggle to show/hide the body paragraph of this news feed. The Continue Reading button is where my issue is, every time I click on the "Continue Reading" button in the lower right of each news post, it show/hides all the news items, not just the one I click on.
I have tried using Bootstrap collapse and now I am using jQuery Toggle() however I run into the same issue! Take a look at my XSLT code snippet to display thee body paragraph and the corresponding jQuery code snippet that actives the show/hide toggle:
XSLT:
<tr class="spacer">
<td valign="top" class="td-newscontent">
<div class="news content">
<!-- start excerpt -->
<xsl:value-of select="#BodyExcerpt" disable-output-escaping="yes" />
<div class="moving">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- end news excerpt -->
<!-- start continue reading link -->
<xsl:text disable-output-escaping="yes"><![CDATA[<br class="continue-br" />]]></xsl:text>
<a class="butt pull-right continue-right">Continue Reading</a><br /><br />
<!-- end continue reading link -->
</div>
</td>
</tr>
Javascript (jQuery)
$(".moving").hide();
$(".butt").click(function() {
$(".moving").toggle("slow", function() {
});
});
.moving is the actual #body being shown/hidden
.butt is the "continue reading" button (I know butt was a bad name to use)
I have read a few things on the net about "this" but I am not sure how to use it.
First time posting so I couldn't post any images, but when you click on "continue reading" all the body news articles expand then you click it again and all the body news items contract, what I would like it to do is open just the one I am clicking on!
I have a lot going on, everything is housed in SharePoint, using HTML5, Css3, jQuery and XSLT. I started by using IDs but I switched to classes, not sure if that was a good idea but it functions, but not as intended.
Any help would be appreciative, I have been researching this issue for almost 2 weeks so I finally decided to ask some experts :) (Feel free to ask any questions or ask for more information, I will answer with everything I got!)
You are close, so well done for getting this far! Your problem lies in your JavaScript. If you look at the rendered code using your browser's developer tools (F12), you will find that all of the different body texts have the same class (moving) and all of the buttons have the same JavaScript onclick, which is to toggle everything of class .moving.
Thus the solution you are looking for is to match each button with its respective body text. There are two main ways you can do this.
You can give each text div and each button a unique ID by assigning it to some unique feature of the list item (SharePoint list items already have a unique identifier as the field ID). Using xsl:value-of within HTML attributes would violate XML rules, so you can use something called an Attribute Value Template, which is the bit in the curly braces:
<div id="newstext_{#ID}">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- etc... -->
<a onclick="$('#newstext_{#ID}').toggle('slow', function() {});">Continue reading</a>
Modify just the JavaScript to target the parent of the button. The following code selects the parent DOM element of the button, which should be the div of class .news, then finds the child of class .moving, then applying your toggle:
$(".butt").click(function() {
$(this).parent().find(".moving").toggle("slow", function() {
});
});
The second method is easier but can get complicated if you end up running a lot of JavaScript. It is easier (and more efficient) to select elements by ID, so personally I think the extra effort is worth it. I haven't tested this code so let me know if it doesn't work. On some of your other points:
no, butt is not a good name for a class - remember, you can use element types in your jQuery selectors, so there is no need to duplicate the type as the class. For example, $('a') selects all the anchor tags on the page.
IDs should be used when elements need to be uniquely identified (e.g. for scripts), classes when you are grouping elements together (e.g. for styles).
I'm trying to debug/troubleshoot why the content that is displayed in the share link/window continues to show our browser detection content which we do not want displayed. I've updated our code to detect the Facebook crawler and not show this content if it's detected but the share link is still showing this. I've even tried to use the Facebook debugger to refresh the cache but it is still not working.
The share button code I'm using is this:
<div class="fb-like"
data-href="https://www-dev.hoopladigital.com/title/11042831"
data-layout="button_count"
data-colorscheme="dark"
data-action="like"
data-show-faces="true"
data-share="true"></div>
So either the cache is not being cleared, or my browser detection code is still getting executed when it shouldn't be. The text pointed to in the arrow in this screenshot should not be getting displayed.
How do I go about troubleshooting this?
http://note.io/LvbN5K
Your og:description is empty, so most likely Facebook takes the first text content that looks relevant to it … so provide a description!
I am having a problem getting a div containing facebook like/send buttons to expand when the buttons are clicked. I have searched and tried and tried to fix this, but I'm hitting a wall. I believe it has something to do with how the buttons render an iframe, but I'm not sure.
Here's the code, plain and simple (with an example link for og data).
<div id="fb_btns">
<fb:like href="http://www.imdb.com/title/tt0117500/" data-send="true" layout="button_count" width="450" show_faces="false" ></fb:like>
</div>
and the non-expanding div can be seen here
http://spadeballink.com/GALLOWS/TheGoddamnGallows.html
Any help counts! Thanks in advance!
*Also there is no css declaring the height of this div, the only heights declared are for html and body to be 100% (needed for the background image).
Are you using XFBML or Iframe version of like button? For Iframe version you need to use layout=standard for people to be able to see fly-out comment box.
The code I use to render share button is:
<a name="fb_share" share_url="http://www.XYZ.com" type="button_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
The above code exists in the page and works fine and when users clicks a button, that action will add the above code (with a different url) to the dom and My goal is to render another facebook button with count. However the problem is that the FB.Share js seems to somehow know it has already did the job and will not render again.
After poking around with the FB.Share script a bit I found this methoe FB.Share.renderAll() can force a re-render but without count numbers.
Anyone has any insights? Thanks!
try calling the JavaScript SDK's FB.XFBML.parse();
See: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
When you re-add facebook share script, it renders again the share button.
for example: $.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share");