I have an app which is embedded in a facebook page which happens to be an iframe.
There seems to be fb security concerns over usage of external javascript links. So I have replaced all my external links by either downloading them or some other tweak
For eg. js css libraries hosted at googleapis .
However I am facing a serious issue while removing the dependency of a 3rd party called 'Share This' which happens to be a plugin for share widgets of Social Websites like Fb,Twitter,Google Plus.
I have checked some other options like addthis.com but it again depends on importing external javascript which would be an issue again.
Share buttons of twitter and facebook given by them are HTML solution and would require share URL to be specified in advance but my share buttons will get the url to be shared dynamically after some process.
Is there any way which I could create Facebook , Twitter , Google Plus share buttons dynamically with custom url to share ( not the website page Url ).
Any help would be really appreciated ! :)
Cheers :)
Related
I am currently working on a custom URL shortener and am trying to figure out how to "inject" my own social preview metadata dynamically for each page. (eg. for Twitter Cards) I had originally planned on doing this in much the same way as I am with the actual redirect, fetching the data using the JavaScript fetch API. After reading a little more though it does not appear that this approach will work since it doesn't look like the twitter (and other social media web crawlers) run JS when looking for the metadata.
Is this correct?
If so, is there a way I can load the metadata from a dynamic source instead of just having to create a new html file for every redirect?
It looks like I can probably do something, at least for the image based on a test of this link (using https://source.unsplash.com/random for the image) through the twitter card validator. But what would be the best approach to doing something similar? Everything I can think of would use JS.
I have similar pages in production.
You'll need to use a server-side language (like PHP, or node.js) to set the meta tags for your twitter cards, and use javascript to redirect the page.
I have implemented many third party apps where the vendor provides me a snippet of code that I just need to place on a page in the website.
What are some ways to do that? Specifically, can an angular2 application be injected in such a manner?
I am building an application and would like to provide the clients the script tag(s), along with validation credentials to place directly on their site and the site would load in the container element on the page and look as it was part of their site.
Suggestions?
This is frequently done with the iframe element. Check out this MDN article.
One of my sites has a custom share plugin that I've written and I would like to try to get the 'sharing' feature to open up in the native Facebook app if possible. I know that you can use fb:// to open up the app but from what I've read, this is part of FBML which has been deprecated for several years. What I ideally would like is to have the link open up the FB app with a pre-populated link in the share box that the user could then just automatically share. Basically the functionality of the sharer.php script (it's ok if it pulls the data from the OG tags).
I know it can be done in iOS apps (and probably Android) but is it possible to do through a web interface?
I have the links I'm using only showing on mobile devices through some Javascript so I wouldn't have to worry about it causing any problems sitewide.
Thanks for your help!
var url = encodeURIComponent('http://example.org/');
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+url,
'Share on Facebook',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'
);
That's the simplest way I do it ;)
I have a website which has two versions, an all singing all dancing javascript powered application which is served when you request the root url
/
As you navigate around the lovely website the content updates, as does the url, thanks to html5 push state or good old correctly formatted #! urls. However if you don't have javascript enabled you can still use all functionality of the site as each piece of content also exists under it's own url. This is great for 3 reasons
non javascript users can still use the site
SEO - web crawlers can index the site easily
everything is shareable on social networks
The third reason is very important to me as every piece of content must be individually shareable on the site. And because each piece of content has it's own url it is easy to deep link to that url, and each piece of content can have it's own specific open graph data.
However the issue I hit is the following. You are a normal person and have javascript enabled and you are browsing and image gallery on the site and decide to share the picture of a lovely cat you have found. Using javascript the url has been updated to
/gallery/lovely-cat
You share this url and your friend clicks on it. When they click on the link the server sends you the non javascript / web crawler version of the site, and the experience is no where near as nice as the javascript version you would have been served if you directly went to the root of the site and navigated there.
Do anyone have a nice solution / alternative setup to solve this problems? I have several hacks which work, however I am not that happy with them. They include :
javascript redirect to the root of the site on every page and store a cookie / add a #! to the url so on page render the javascript router will show the correct content. ( does google punish automatic javascript redirects? )
render the no javascript page, and add some javascript which redirects the user to the root, similar to above, whenever the user clicks on a link
I don't particularly like either of these solutions, but can't think of a better solution. Rendering the entire javascript app for each page doesn't appear to be a solution to me, as you would end up with bad looking urls such as /gallery/lovely-cat/gallery/another-lovely-cat as you start navigating through the site.
My solution must support old browsers which do not implement push state
Make the "non javascript / web crawler version of the site" the same as the JavaScript version. Just build HTML on the server instead of DOM on the client.
Rendering the entire javascript app for each page doesn't appear to be a solution to me,
That is the robust approach
as you would end up with bad looking urls such as /gallery/lovely-cat/gallery/another-lovely-cat
Only if you linked (and pushStateed) to gallery/another-lovely-cat instead of /gallery/another-lovely-cat. (Note the / at the front).
Try out this plugin it might solve your 3rd reason, along with two reasons.
http://www.asual.com/jquery/address/
I've just created the required HTML5 Mobile web pages(including the CSS3 and javascript pages). I've got the apk file from build.phonegap.com as well.
But I want it to be dynamic i.e I should be able to add content from my laptop.
I've searched a lot but I'm unable to get the right info on doing this.
I just want to be adding simple text paragraphs from my local server(laptop) to the app on the go. What do I do ?
Sound like you need to set up some type of json / sql web service.
Use your machine's ip to do this.
Suppose your laptop ip is 192.168.1.1
Then from your application just use
http://192.168.1.1/your_appliction/webpage
replace http://localhost/ to http://10.0.2.2/
EDIT:
Treat your laptop as remote server and access the files in it as you normally do in website building.
From another post I think might help...
1- if you are building the whole site from scratch: You can create your site by any CMS like dotNetNuke or joomla which will allow you to login and edit what you want
2- if you are building just this page from scratch : You can build your page with online-editing in mind, in this case I recommend to build two pages one for for viewing content and the other for online-editing you can use any HTML-Editor control like FCKEditor
3- if you are dealing with already built page : it will be easier to build administration page which you can upload the new version of the content page to it, and the administration page take care of replacing the content page
Or maybe even the knockout js plugin could be something to look into http://jsfiddle.net/rniemeyer/LkqTU/