-1

I've got a web page that has 250 different items on it, each with its own Like button using the standard Facebook "Like" code:

div class="fb-like" data-href="http://www.mywebpage.com/myproductpage" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false" etc.

This page works fine in all browsers on all computer platforms, as well as on Android devices. Unfortunately, all the separate Facebook Like buttons seem to create a memory issue for iPads and iPhones, and Safari crashes on our page on these devices.

The div class="fb-like" etc. part of each like button is not something I can easily change on our thousands of pages to make iPads happy, but I can easily remove the standard Facebook code that appears at the top of those pages which makes the Like buttons work. What I'd like to do is replace the Facebook code at the top of each of our pages with my own HTML that grabs the data in each of these "Like buttons" and generates my own buttons that function a bit differently. (Perhaps they each will link to a separate page that will then be a sharing page when the pages is loaded on an iOS device.) Only issue is I don't quite grasp the HTML/CSS/Javascript required to cause each of these items with class="fb-like" to trigger something to generate content within them. I imagine this is what the Facebook code linked to at the top of a page with Like buttons does.

Can someone briefly explain to me how to access the data in a class="fb-like" part of my page, and put my own item there? I can then dynamically do something different on iPads/iPhones so they don't crash, perhaps by just turning the like buttons into sharing page links.

I can write my own Javascript/HTML code for that just fine, but only after I have some understanding of how to access the data values in each "fb-like" DIV and how to cause my generated code to trigger to appear on that page in each of those 250 places.

Any examples of accessing the data within a class="fb-like" part of my page and then generating something in them would be appreciated. Even the very simplest of examples should be enough for me to understand how to program whatever I need from there. Can someone just help get me started?

Jeff Gold
  • 29
  • 7
  • maybe javascript access the element with class and in that element there lies some id/data which lets server know what was liked. – Muhammad Umer Aug 18 '13 at 20:25
  • Sounds like a good suggestion. I'm reading a post about that here... http://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript If anyone has any other more specific suggestions or examples, please share. Thanks. – Jeff Gold Aug 18 '13 at 20:34

1 Answers1

1

Based upon Muhammed's suggestion and finding the above referenced post on this site, I created a little example for myself that seems to work. This example just accesses the data-href for each Like button and puts it in that location. This should be enough to get me programming the rest of our modified page for iOS. Here's the code I came up with, just slightly changed from the page referenced above to fit the Facebook like button class:

<SCRIPT>
function replaceContentInContainer(matchClass) {
var elems = document.getElementsByTagName('*'), i;
for (i in elems) {
    if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
            > -1) {
        elems[i].innerHTML = elems[i].getAttribute('data-href');
    }
}
}
replaceContentInContainer('fb-like');
</SCRIPT>
Jeff Gold
  • 29
  • 7