Facebook likes Not Working when javascript add - javascript

So i am trying to add a like to my individual posts. So i added this to each of the posts. The posts are generated from database output then assembled with the properly styling in a javascript file.So i added this to the creation mix.
<fb:like href="my_not_so_sweet_website" layout="button_count" show_faces="true" width="200"></fb:like>
Weird part is... None of them show up. THEN i try taking that code that i generated for each post and just copy and paste it to the top of my website, and low and behold A like Button!!!. Any clues? Need more info? Help?

You are using what's called FBML. The like button is rendered on the fly (well, on page load) by a facebook javascript libabry you include on the page- it needs the FBML tags to know what to render.
The problem is that the FB library isn't smart enough to know that you've dynamically added these FBML tags to the DOM.
There is another type of like button that's an iframe, that one should work if you put it in the DOM dynamically. Docs for that are here: http://developers.facebook.com/docs/reference/plugins/like/
-when you enter your info into the widget there will be an option for iframe.
There is also a FBML render function in the FB javascript SDK. Docs are here: http://developers.facebook.com/docs/reference/javascript/fb.xfbml.parse/

Related

Insert html pages into wordpress

I have an html site with a page of info for each county in the US. I want to convert this into a new wordpress site. I can do this one by one but my issue comes when I have mass changes to affiliate code or common text. I would have to got to each page and manually change it. but with over 3000 pages it would be way to time consuming. I dont want to use Iframes but would like to know if there is a way to call the html pages into the wordpress page that makes sense seo wise.
I am open to creating a page for each county or have one page with text or buttons on it with each county listed and when clicked will insert the info below. I know alot about static html coding but am new to php.
If you dont want Iframes, I think there only remain two options. I don't know if they will work in WordPress though.
1. PHP Include
With the very simple PHP include() statement, you can include the old html files in your new website. If you have a HTML-file for example, name your file yourname.php and add this in the position you want your old page to appear:
<?php include(path_to_old_page/name.html); ?>
This will include the full old page, but the file needs to be on the same server.
2. AJAX
With JavaScript you can perform XHTTP-requests to load files from the server. This is easiest when using jQuery. Here you can use the $(selector).load(path_to_old_page/name.html) statement. This will load the file in the HTML elements to which the selector applies.
(The selector works the same as CSS selectors, see the w3schools page for more)
This will also include the full old page, when it is on the same server
You can have your static pages in WordPress as well. Like if you want to create a new county named "example" you can create new WordPress page named "example" by entering title " example" .... now come to content. Just copy page content (only "example" county related html code from your static website) and place that code inside newly created WordPress "example" page. Make sure you add this html content inside 'text' tab in editor. Your page will be created with all your existing data ... now you can view this page and can use this page's URL where ever you want.

embedding a page with some javascript on a tumblr post

I want to reproduce a simple, one page website with some javascript in a tumblr post (as a form of documentation for a project) but everytime I try to put the source html of the site into the tumblr form it ends up not loading at all inside the tumblr... Here's the page I'm trying to "embed" into tumblr: www.benenson.ae/recording.html
When I copy the html into the tumblr console, I'm fixing the path to the scripts at the top so that's not the problem..Am I missing some trick for getting this to work inside Tumblr?
I wasn't sure what support there was for iframes in tumblr, but it is possible, but you will need to add some styling to suit your needs:
I simply created a new post, selected the html tab and then put in the following code:
<iframe src="http://www.benenson.ae/recording.html"></iframe>
Alternatively you could create a single post, uploading the image content to tumblr and make it link to anywhere you like, and then add a caption for the post that replicates the current text you have.
If that helps or you want to pursue the second option, let me know and I can update my answer.

Wordpress blocking javascript?

I've tried creating a new post on my Wordpress blog and I've pasted an external code from a site, which has a <script src="..."></script> in order to work.
When I publish my post, the script tag simply gets deleted.
Is this a default behavior in Wordpress? Is there any way to avoid this? (preferably without doing any modifications to Wordpress or using inline code).
No this is not default behaviour in wordpress. I have added <script> tags to the html view of a page or post no problem.
Did you switch the view after you add the code ? If so, don't. Wordpress will delete all tags if you switch to view back from HTML.
Like Tim said, you probably posted the code into the Visual Editor (doesn't accept any HTML tags, like scripts). You should to the HTML editor to implement your code, but if you want to have it on more than one page, you should open up the Appearance Editor and paste it into your theme where you need it (most likely in the header).
If you put the script code in html and then switch to the visual editor, it will delete the script. This is a commonly reported problem and is the default behavior of wp.
Wordpress assigns Roles to Users, Users who are either Administrators or Editors can add javascript codes within posts. If the User's role is Author or Contributor then they can not add javascript codes inside posts, even if these users try to add Javascript in HTML mode, wordpress automatically removes the tags.

How to create a javascript plugin like the Facebook live stream?

I am looking to create an easy java script plugin for my site that can be placed in other sites to pull info from my site. The Facebook live stream plugin allows you to select a couple options and it will spit out a line of code to place in your site to have the Facebook live stream. Can someone point me in the right direction or give me some info on how to do this? I know how to write the java script to pull from my site but I do not know how to make it so simple to integrate into another site. I really like that the Facebook plugin requires only one line of java script, this will make it easier for my customers to include in their site. Any help would be appreciated.
Thanks
Take a look at the code you have to post when using FB live streams:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script>
<fb:live-stream event_app_id="APP_ID" width="400" height="500" xid=""
always_post_to_friends="false"></fb:live-stream>
So here's what I would think happens under the covers:
The script is fetched from the server
Onload the script code looks for the fb:live-stream element and looks at the attributes as parameters
The fb:live-stream element is removed from the DOM and converted to appropriate DIVs, etc.
The script registers some mechanism to periodically refresh the content in the DIVs
It's also possible that the fb-root element is used for the content. No idea. Would have to look # a DOM.
That's really all most of these widgets do. Usually you tell the user to get a script.js via a script tag and also define an element that they would like for the content to appear in. Once the script tag is loaded, register an onload handler, find your element, and do what you gotta do.
Just be careful to isolate any jQuery instances or globals you might depend on so you don't mess up anything on the page.

Editing Facebook Like-Box Css on The FLy?

I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.

Categories