Facebook Like button hack

Mesenko

I discovered that if you include the smugmug facebook like button somewhere on your page, it inserts the appropriate javascript needed to support other custom facebook like buttons such as these: https://developers.facebook.com/docs/plugins/like-button/

You can see an example at the bottom of my gallery here:
http://www.mesenko.com/Landscapes/Flathead

thenickdude

Interesting, good find!

brandofamily

Oh, you probably should not have announced that to the SM world... the functionality may be gone by morning

TheBradford

Where do I put what - I tried doing this and nothing showed up.

thenickdude

So, in the customiser, drop a Social/Share Buttons block onto the page, to give you a regular Facebook like button. Then on Facebook's button builder, build a custom like button, or a custom like box, and click "Get Code". Create an HTML block in SmugMug on the same page as the Facebook like button, copy the code from the Facebook section "place the code for your plugin wherever you want the plugin to appear on your page" and paste it into the HTML block. Voilà!

You can then add a CSS block to the page to hide the original Share Buttons block, if you like. That code would be:

.sm-page-widget-socialbuttons {
  display: none;
}

.sm-page-edit .sm-page-widget-socialbuttons {
  display: block;
}

TheBradford

cool got it

edsh

brandofamily wrote: »

Oh, you probably should not have announced that to the SM world... the functionality may be gone by morning

Such an interesting point you make. I totally agree, and in fact, what a great example SM makes with their anti-patterns for sharing and creativity

pekr

Hmm, somehow not being able to hide the buttons. I put like-box on my site, and in its CSS box I put the CSS to hide the SM Like button. Maybe it needs to be placed elsewhere?

You can see my attempt on our studio site: http://studio.2zone.cz

Edit: Ah, done - the CSS can't be attached to FB like box, you need to place separate CSS placeholder on the page, but that is what you wrote after all. Sorry for the confusion ....

Smugger1

How do you get the Facebook "faces" (from all those who've liked your page) to show up across the bottom like they are on http://www.mesenko.com/Landscapes/Flathead/? The faces appear to be in a block of their own but I'm not sure how to get that same look.

Any suggestions?

Thanks!

paulbrock

I'm guessing this doesn't violate Smug's Javascript rules, as the only thing thats changing is the HTML code, not any new javascript - the JS is presumably the same for any variation of the like button.

Would be good to get this rubber stamped by Smugmug though....

Adrien699

paulbrock wrote: »

I'm guessing this doesn't violate Smug's Javascript rules, as the only thing thats changing is the HTML code, not any new javascript - the JS is presumably the same for any variation of the like button.

Would be good to get this rubber stamped by Smugmug though....

I am totally agree with you. You are 100% good here that this does not breach Smug's Javascript guidelines, as the only factor thats modifying is the HTML rule, not any new javascript.

facebook timeline covres

1968Rouleur

Still valid?
Hi All-

So, in the customiser, drop a Social/Share Buttons block onto the page, to give you a regular Facebook like button. Then on Facebook's button builder, build a custom like button, or a custom like box, and click "Get Code". Create an HTML block in SmugMug on the same page as the Facebook like button, copy the code from the Facebook section "place the code for your plugin wherever you want the plugin to appear on your page" and paste it into the HTML block. Voilà!

Is this customization still viable? I am trying to put a Facebook Like Box with thumbnails and a feed on the homepage of my SmugMug site but nothing is happening. When I go to Facebook's code builder (https://developers.facebook.com/docs/plugins/like-button/) I'm given four choices: HTML5, XFBML, IFRAME and URL. Which, if any, should I be dropping into my HTML module?

Thanks in advance for any assistance.

-Chris

thenickdude

Rouleur, it's still working for me. You want to grab the code from the bottom box on the HTML5 tab:

1968Rouleur

Hmmmm... Not working for me.

I'm adding this to a sidebar on my Entire Site. I added the social media icons to the Footer of the Entire Site and configured appropriately. I've dragged an HTML block and dropped it into the sidebar. When I paste in the HTML5 Plugin Code from the Facebook Developer tool and click Done the HTML box simply disappears and the area on the page is blank as if nothing happened.

I'm working on a major overhaul of my site and this is one of the changes that I'm making but haven't published yet. Not sure if that could be a factor but just trying to provide as much info as possible. Maybe it has to be on a specific page and not Entire Site...?

Thanks a ton for your help!

-Chris

thenickdude

Can you paste the code here that you're adding to your HTML content block?

1968Rouleur

Yep:

Thanks for taking a look!

thenickdude

Ahhh I wonder if you're seeing that because the Facebook "like box" doesn't seem to render in the customiser, so the page looks blank. Try publishing the change, you should see it appear after you save.

1968Rouleur

Perhaps. I would also note that as a result of my multiple attempts to make this work there were multiple phantom HTML blocks on my page that needed to be deleted.

Per my understanding of customization there is no way to publish just one customization like this to see if it works. I'm halfway through changing the entire look and feel of my site. If I hit "Publish Now" all of my changes would go live. I'll have to wait until I've got it all done to test this. If I'm wrong about that please let me know.

I'll report back as soon as I have an answer...

Thanks!

1968Rouleur

Update: Published all changes. Tried adding an HTML block to the sidebar of my site with the following code:

<div class="fb-like-box" data-href="https://www.facebook.com/CTOutdoorGuide&quot; data-width="280" data-height="600" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="false"></div>

No luck. As soon as I click Done the block disappears. Publishing the change doesn't make it appear. The customizer does show that there's an HTML block on the page though.

thenickdude

And you've definitely still got a Social/Share Buttons block on the same page too? Do you have a link to an example page?

1968Rouleur

D'oh!!! I forgot I had taken the sharing buttons off temporarily! Added them back in and now it works!

FYI, The page is here: http://ctoutdoorguide.com/

Thanks so much for your assistance with this!

thenickdude

Awesome, it looks great too.

anilkumardesai

1968Rouleur wrote: »

D'oh!!! I forgot I had taken the sharing buttons off temporarily! Added them back in and now it works!

FYI, The page is here: http://ctoutdoorguide.com/

Thanks so much for your assistance with this!

I am having exactly the same problem. Could you please elaborate on what changes you made? Where did you enable the sharing back?

I want to add Facebook Like Box in my About page.
http://www.desaiphotography.com/About

Got the below code from Facebook's Developer's page.

<div class="fb-like-box" data-href="https://www.facebook.com/DesaiPhotography" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

anilkumardesai

anilkumardesai wrote: »

I am having exactly the same problem. Could you please elaborate on what changes you made? Where did you enable the sharing back?

I want to add Facebook Like Box in my About page.
http://www.desaiphotography.com/About

Got the below code from Facebook's Developer's page.

<div class="fb-like-box" data-href="https://www.facebook.com/DesaiPhotography" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

I was able to get it by adding Facebook like buttons to the page. Thanks for the help. :-)

Tom Foster

Facebook 'Like button'
I followed the instructions on this thread:

http://www.dgrin.com/showthread.php?t=242284

...but no luck.

I tried putting this code on my page:

<div class="fb-like" data-href="http://www.facebook.com/spectacularedinburgh" data-width="300" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

However I don't see anything when I publish. I have the Smugmug social icons on the page and I don't have an ad blocker running. Any ideas? I've seen it working on other pages!

Thank you!

Tom Foster

Sorry for resurrecting an old post but can't get this to work.
I have social media icons on my page, don't have an adblocker running and I've copied the code from the second box down on the HTML5 page yet still I see nothing...

What am I missing?

rainforest1155

Spectacular Edinburgh wrote: »

Sorry for resurrecting an old post but can't get this to work.
I have social media icons on my page, don't have an adblocker running and I've copied the code from the second box down on the HTML5 page yet still I see nothing...

What am I missing?

What's the link to your page so that we could take a look at it?

Tom Foster

Edinburgh Photography

Thanks for having a look!

rainforest1155

Spectacular Edinburgh wrote: »

http://www.spectacularedinburgh.com

Thanks for having a look!

The way I understand that this hack works, is that it uses the code that is loaded when you add the "share buttons" content block to the page. However, looking at your site, I don't see that you've added that content block from the social section. After you added the share buttons content block, try again.

Please note that no javascript code is supported on the New SmugMug, but you seem to have pasted in javascript in the html content block you added to your homepage. Make sure to remove that code (anything with a <script > tag)

Tom Foster

rainforest1155 wrote: »

The way I understand that this hack works, is that it uses the code that is loaded when you add the "share buttons" content block to the page. However, looking at your site, I don't see that you've added that content block from the social section. After you added the share buttons content block, try again.

Please note that no javascript code is supported on the New SmugMug, but you seem to have pasted in javascript in the html content block you added to your homepage. Make sure to remove that code (anything with a <script > tag)

Ohhhh the Share buttons! I was thinking it meant the other social icons, will give that a go! As for the <script>, I didn't think that would work but was clutching at straws so thought it was worth a try!

Edit: Thanks! That works, will edit my page properly later!

rainforest1155

You're welcome, that's great to hear!