Django Zinnia not displaying Facebook HTML Like correctly

Question

I have Django Zinnia installed. In the Edit Entry Admin Page, when I paste the Facebook HTML Like Button code into my Entry, it doesn't show up.

I am getting the source code from here: https://developers.facebook.com/docs/reference/plugins/like/

I am pasting this into my Entry:

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="false" data-send="false"></div>

However, after I paste that into my Entry, this is what it ends up looking like:

After I save the Entry and look at it in my blog, the Like Button is not there. When I do an inspect element, this is what I get:

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered">
    <span style="height: 0px; width: 0px;">
        <iframe id="f2bdd2133" name="f1df56cf" scrolling="no" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df2f816705c%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff273626188%26relation%3Dparent.parent&amp;colorscheme=light&amp;extended_social_context=false&amp;href=http%3A%2F%2Flocalhost%3A8000%2Fblog%2F2013%2F09%2F19%2Ftest%2F&amp;layout=standard&amp;locale=en_US&amp;node_type=link&amp;sdk=joey&amp;show_faces=true&amp;width=450" style="border: none; overflow: hidden; height: 0px; width: 0px;">
        </iframe>
    </span>
</div>

When I go back to edit my Entry again in the Entry Admin Page, the Facebook code has disappeared:

I do have the JS SDK code on my page.

What's going on here and how do I get the Facebook like button to show up?

Answer 1

I had some similar issues in cms with external links, you have some options, I've tried this two ways:

First

The first thing I've done trying to do this, is to use Link Plugin and insert in the plugin the values needed for facebook sharing. (Not all cms versions works well with this)

Second

When the first solution didn't work for me, I writted the links directly in the django template, because I'm not sure why, but cms sometimes modify the links or plugins I try to add. So I recommend you to create a placeholder before or after the place where you want your link, and write directly in the template the facebook link.

I know these are not beautiful solutions, is the things I've done when I find myself in a similar situation. What I can tell you for sure, is that the problem is CMS. It's CMS who modify the code you put in the placeholder.

Answer 2

While the question is pretty old, I think I should still share my solution. Even if it doesn't help you, someone else may stumble upon it.

I had a similar issue with zinnia's Entry admin. The problem was with wymeditor - the release used in zinnia didn't allow adding iframes to entries.

The solution I've come up with was as follows:

1. Put wymeditor plugin (plugin described here wymeditor cannot save inserted iframe) in your staticfiles dir.
2. Override zinnia EntryAdmin somewhere in your code as follows:

   class CustomZinniaEntryAdmin(EntryAdmin):
       def _custom_media(self):
           _base_media = super(CustomZinniaEntryAdmin, self)._media()
           return _base_media + forms.Media(
               js=('/your/static/path/jquery.wymeditor.embed.js',)
           )
       media = property(_custom_media)
   admin.site.unregister(Entry)
   admin.site.register(Entry, CustomZinniaEntryAdmin)

And it should work.