Facebook SDK share with text and a variable - javascript

This is my first time using the Facebook SDK and I am finding it a rather large and difficult to navigate source.
I have my app ID and I am ready to go. I can get a share button to come up and open correctly (though, weirdly, I can not get the button to show in a Bootstrap modal footer, if you can solve that too, I'd be grateful). But now with the share I want to say something like:
"I scored " [the variable "score"] at [website]"."
Then they can push "share".
I have this div <div id="fb-root"></div> - where should this be placed?
I have taken the information and source code from here: https://developers.facebook.com/docs/plugins/share-button
In summary: I'd like the FB share button to be able to be seen only in the modal footer (I can't seem to get this to work at all) and to have a small quote of text with the user's score.

Related

Facebook page content in webpage

I want to render each posts from my facebook page to my website, using frontend JavaScript + HTML + CSS code? Is this possible?
Please share me some tutorial or reference for doing this.
update
So far I have trried following:
I went to following URL : https://developers.facebook.com/docs/plugins/page-plugin/
And try to do as it mentioned for JavaScript SDK
Step 1: Include the JavaScript SDK on your page once, ideally right after the opening body tag.
Step 3: Place this code wherever you want the plugin to appear on your page.
I don't know why there is no Step 2
Also after doing this also, my page is not loaidng content.
Follow these process:
Go to facebook page plugin
Fill in the form giving the url to your page
Click on Get the code
You will get two options to show the FB page details
i) using SDK
ii) using iFrame
Select any one option and follow the steps provided.
There you go. Your Facebook timeline in your website.

Addthis Twitter Follow Button Customize

I'm currently using Addthis for my social media share / follow buttons, the problem I'm facing is on the twitter follow button I don't want it to display the username (so the button isn't so wide) I just want the word follow and the counter, I'm displaying this follow button like so on my site,
Twitter Follow
<a class="addthis_button_twitter_follow_native" tw:screen_name="myaccount"></a>
And once this has loaded I took a look at the source code and noticed that it loads a <span> element with the id #1 and inside that is a <b> tag and that's where the username is so I need to remove #1 b but when I try to do this with css #1 b { display: none !important;} or with jQuery $('#1 b').remove() its not working, does anyone have any suggestions or other approaches to this, thanks in advance for any help!
Check Twitter api here...https://twitter.com/about/resources/buttons#tweet
You can customize your self there.
To integrate followers count just use,
data-show-count="true"
and for removing user name from button,
data-show-screen-name="false"
Now it only shows the follow button and count of followers and here is the full code,
Follow #twitterapi
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Adding customizable Text to a Magento Page

I've been tasked with trying to add a message to the Product Compare Page which will appear if the customer has, by some stroke of stupidity, been able to access the page when there are no products to compare
now i understand there a <script type="text/javascript">window.close();</script> already in there however it seems like it doesn't work if you open a new window and type in the URL (the equivalent to bookmarking the page, how i figure is that if i put this message above the <script type="text/javascript">window.close();</script> line, if the window doesn't close the customer will get the message.
Now that part is easy enough, the hard part is the second part to my task and that's allowing this text to be changeable though the blackened much like how you can change the Logo Image Alt in System > Configuration > Design > Header.
we already have some new section in System > Configuration thanks to some custom modules however i don't want to have to create an entire module just so a department we can't trust to edited the page and not stuff it up in the process can change one line of text
So is there a way to add customizable Text to a Magento Page
You could change the javascript to window.location = '/sorry-page'; or something like that and creat "sorry-page` as a CMS page. Otherwise you will need a custom module.

How to stop Google from using a Javascript loaded greeting from being used as meta desciption

I have a Javascript greeting that greets new users with a drop down banner like SO has. It only becomes visible after 3 seconds and when the X is clicked it disappears. Since I have not put meta description tags, on every page Google shows that greeting as the meta data. I dont understand why Google is using this seeing as it is not loaded staight away, will this stop happening if i use meta description?
Should I use Meta desciption? On the upside it might help this problem, but then Google wont be able to dynamically fetch data from the site (which happens to be a forum). It so happens that it is doing this anyway and I dont know why?
Thanks!
My best guess is the text from your greeting is being added to the page (a wordpress plugin?) on the server side as visible (so it appears even if javascript is disabled), hidden by javascript on pageload, then just being shown after 3 seconds (i.e. it is really there already and as such is the first major text google finds).
Try changing your greeting plugin/code to generate the div containing the greeting message after page-load, or at least to append it to the end of the document (or apply style="display:none;" as an inline-style so Google can see it) on the server-side then tweak the js to show it. It would no longer greet visitors with js disabled, but would also allow google to reach your main content without encountering the greeting.
It does this because it's the first readable bit of text found when parsing the DOM. I'm not sure if there is a delay google uses before it saves the page state to its cache but that shouldn't matter. I actually use this 'feature' of google to allow me to manipulate what the site listing says in the search listings. If you want it not to show up just move the code for the message to the bottom of your <body>s node list (i.e. put it just before you close the </body>).
display:none won't do anything it has to be moved so that it's not in the first few readable lines of text when the DOM node tree is parsed.

Facebook likes Not Working when javascript add

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/

Categories