Sunday 18 August 2013

How does Facebook Like button code work, and how can I do something similar?

How does Facebook Like button code work, and how can I do something similar?

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?

No comments:

Post a Comment