Facebook button renders differently on Firefox vs Chrome - facebook

I'm having inconsistent results when using social media "widgets", more specifically the Facebook Like button. It is shown differently on different browsers.
I'm trying to use the "large" version of both widgets. Whereas Chromium can display the large and small versions of the twitter widget without any issues, a quite different facebook button shows up.
At a first glance, it doesn't seem to be a rendering issue, as apparently facebook is using different source assets for the widget -- notice the white "f" and the baloon counter.
What's causing this and how can I solve it?
Code
<span class="fb-like"
data-size="large"
data-href="http://www.google.com"
data-layout="button_count"
data-action="like"
data-show-faces="false"
data-share="false"></span>
<a href="https://twitter.com/share"
class="twitter-share-button"
data-size="large"
data-text="TEXT"
data-url="http://www.google.com"
data-via="username"
data-related="username"
data-lang="pt"
data-show-count="false"></a>
<br>
<span class="fb-like"
data-size="small"
data-href="http://www.google.com"
data-layout="button_count"
data-action="like"
data-show-faces="false"
data-share="false"></span>
<a href="https://twitter.com/share"
class="twitter-share-button"
data-size="small"
data-text="TEXT"
data-url="http://www.google.com"
data-via="username"
data-related="username"
data-lang="pt"
data-show-count="false"></a>
<script type='text/javascript' src='//platform.twitter.com/widgets.js?ver=4.6.1'></script>
<script type='text/javascript' src='//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.8'></script>
Result
Firefox (50.1.0 Linux):
Chromium (51.0.2704.103 Russian Fedora 64-bit):

They're not shown differently on different browsers, they're shown differently if the user is not logged in (you're probably logged in Chrome browser, that's why this happens).
For some reason, Facebook is now using different styles for its buttons when user is logged in or not. And the whole thing is around this input:
<input type="hidden" autocomplete="off" name="new_ui" value="true">
It's not a configurable feature, they just release things as they go. :)

Facebook has rolled out new updates for logged in users and not logged in users. That is why you are seeing different buttons. While changing that an be impossible, another thing that comes to my mind is explicitly changing the default values and overriding the CSS aka CSS Reset.
Default: https://developers.facebook.com/docs/plugins/share-button/
Also this:
Why jquery ui button looks different in Firefox and Chrome

Related

How render elements based on device in server side using sightly (HTL)

Try to render elements based on device screen size, say for example I have two DIVs (desktop and mobile) and I wanted to render desktop DIV for desktop user only and mobile so on.
<sly data-sly-test="${ANY_LOGIC_HERE}">
<div class="desktop-render">
<button type="button" aria-label="${item.Label}" class="btn btn-primary btn-desktop">Click Here</button>
</div>
</sly>
<sly data-sly-test="${ANY_LOGIC_HERE}">
<div class="mobile-render">
<button type="button" aria-label="${item.Label}" class="btn btn-primary btn-mobile">Click Here</button>
</div>
</sly>
I know there was some CSS/JS trick, but I need it through server sides. So that on-page view source can have only one div.
Before answering this, I'll remind you that it's generally bad practice to render different markup per device/user-agent. That makes your pages non-cacheable and user-agent is generally not very reliable. There are other techniques, from client-side DOM manipulation to dedicated mobile pages (which you could redirect to in case the device is a mobile).
That said, there's a helper MobileUtil that you could leverage in your Use-Object/Sling Model to determine if the device requesting the page seems to be a mobile.
Make sure to check all AEM server-side mobile APIs!

Customizing Addthis Plugin - passing url using classic asp

I am having lots of problems while coming up with a solution.
I have a website that share text or image greetings( text greeting only at this time) on facebook or twitter etc. I planed to use Addthis.
So I created a function like this
<%
Function DisplayShareDiv(surl, sT, sSummary)
%>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:url="<%=surl%>"
addthis:title="<%=sT %>"
id="addthis_container"
addthis:Description="<%=sSummary%>">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = { "data_track_addressbar": true };</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=###################3"></script>
<!-- AddThis Button END -->
<%
end function
%>
Now problem is that title appears when click on facebook or twitter but url doesn't. I also want to add the description to it. I have og tags too but they need to be dynamic too and i am having problems with fb not picking up that info either. Even though i have run it through debugger. I am at it for 2 days and it is now all a mish mash. I would really appreciate if someone can please help me!!
Now I'm getting this. Is that as you require?
I think facebook was picking up an old version of your page.
The text it picked up were from the OG and description meta tags on your home page.
If you run your page through their debugging tool, that forces it to scrape the latest version of your page. Plus you might get some useful info too. https://developers.facebook.com/tools/debug/

Synchronizing AddThis widget with Facebook likes?

I'm wondering if it is possible to synchronize the likes between the like button on your actual page & the likes you get on facebook itself!?
For example..... we currently have 15 likes on FB but the AddThis widget on our website only shows 1 like.
So I'm wondering, is there a way you can synchronize the two either with AddThis or ShareThis; doesn't matter the platform, just would prefer it to be synchronized.
I take it if you grab the code from facebook itself rather then use these services then it will be synchronized?
If you specifically point your like URL fb:like:href="THE URL" to your Facebook page when you call the AddThis like button it should be in sync with the likes there.
Like so:
<a class="addthis_button_facebook_like" fb:like:href="THE URL TO YOUR FACEBOOK PAGE"></a>
For example:
<a class="addthis_button_facebook_like" fb:like:href="http://www.facebook.com/nike"></a>
Because you reference FB Social Plugins in your tags, I can confirm that this is definitly the case for Facebook's own like button.
<div class="fb-like" data-send="false" data-layout="standard" data-width="450" data-show-faces="false" data-colorscheme="light" data-action="like" data-href="http://www.nike.com/"></div>
gives the likes for that site. And:
<div class="fb-like" data-send="false" data-layout="standard" data-width="450" data-show-faces="false" data-colorscheme="light" data-action="like" data-href="http://www.facebook.com/nike"></div>
Gives the likes displaying for their FB page.
I believe the issue there is a misunderstanding of the platforms or possible confusion with semantics. Someone can 'like' content on your website via a widget which will share that like to their Facebook profile. Additionally, you can display the amount of likes your website's page has with a Facebook widget or AddThis widget.
However, if you share a page from your website's Facebook page and users can like that, however that will not increment the displayed likes in the widgets aforementioned. Hopefully that clears it up?

two sites with different names established on one Joomla base, how to use facebook like bottom on both of them?

I have one site - example.com and ones mirror - example2.com. Both sites are completely similar and are established on one Jomla's base.
I have like bottom with ID to example.com and on the example2.com this bottom doesn't work (because of wrong ID).
Is it possible to solve this problem - to have two site names and wotking facebook like bottom?
Get rid of the ID and look into documenation on how to generate Like button. Here is Facebook Like Button API documentation/generator.
Like button takes URL as parameter. So simply do this:
Include the JavaScript SDK on your page once, ideally right after the opening tag. http://developers.facebook.com/docs/reference/javascript/
Place the code for your plugin wherever you want the plugin to appear on your page.
On Site #1:
<div class="fb-like" data-href="http://example1.com" data-send="true"
data-width="450" data-show-faces="true"></div>
On Site #2:
<div class="fb-like" data-href="http://example2.com" data-send="true"
data-width="450" data-show-faces="true"></div>
Or more dynamic:
<div class="fb-like" data-href="http://<?php echo $_SERVER['SERVER_NAME']; ?>" data-send="true" data-width="450" data-show-faces="true"></div>
Or Joomla Specific, get live_site configuration from config and display it:
$cfg -> reference to Joomla Config
<div class="fb-like" data-href="<?php echo $cfg->live_site; ?>" data-send="true" data-width="450" data-show-faces="true"></div>

AddThis button + Facebook Like button

I am trying to use AddThis button on a web page of mine, which you can share, like (facebook), and tweet (twitter) -
the AddThis code is pretty straight forward below,
<!-- AddThis Button BEGIN -->
<div id="share" class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a><!---->
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cdb5be51dc49c98"></script>
<!-- AddThis Button END -->
but I don't understand - in the code above, where can I put the image or video url which I have uploaded and posted on my fb page? for instance the url below is the image from my facebook page that I want to track how many people like this picture through my website,
http://www.facebook.com/photo.php?fbid=10150115644909972&set=a.10150115644754972.329183.55239684971
I have read through the documentation on AddThis but it doesnt explain this at all!
http://www.addthis.com/help/client-api#configuration-sharing
It points me to this,
http://developers.facebook.com/docs/reference/plugins/like#
again, this is a Facebook plugin, no used within AddThis. If I am using the Like button from the Facebook API, then I cannot use the AddThis plugin above, can I?
furthermore, The Like button from Faebook API seems to work on the Facebook page, but not an individual picture or video I uploaded/ posted on my Facebook Page, for instance, I tried this on my localhost, the picture on my Facebook Page won't collect the number of likes even though I have clicked the Like button on my screen.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/photo.php?fbid=10150115644909972&set=a.10150115644754972.329183.55239684971" layout="button_count" font="arial"></fb:like>
so my main doubt on the Like button itself - does it work on facebook only or does it apply to the individual picture/ video on my facebook page? I tried to find this answer from the facebook Like documentation but it doesn't explain anything about this.
it would be grateful if you have any idea. thanks!
Try this:
...
<div class="addthis_toolbox addthis_default_style"
expr:addthis:title='Photo'
expr:addthis:url='http://www.facebook.com/photo.php?fbid=10150115644909972&set=a.10150115644754972.329183.55239684971'>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a><!---->
</div>
...
See also: http://www.addthis.com/help/widget-sharing#tagging
You might get an error with the add this way to display the Facebook Like Button and IIS7.0.
I had the problem yesterday and have posted a solution here.
Hope this helps,
Covo