I am creating a Google chrome plugin that injects a button onto all Facebook articles/posts. On click, i would like to query the graph API that Facebook provides and receive the post that the button is injected onto from Facebook.
Does anybody know how to do this or if this is even possible?
I have tried just using JavaScript to search the HTML that the button is injected onto and navigate through the HTML elements in order to find the text content, but this gets very messy quickly.
I was just wondering if somebody knew if the HTML elements contain some sort of identifier that will allow me to query the graph API and receive the specific post im looking for. The HTML does contain the users username but not the specific post ID.
Thanks for reading.
I haven't touched the Facebook graph-API, but if you're just looking for post ID's from the home page on Facebook you can do a simple document.getElementsByClassName("uiStreamSource") and then get all <a> elements inside. The last part of each href always contains the specific post ID.
Related
Scenario of the function:
I want to pre-load the filters on another page when submitting a form from another page.
So in this page >> {LINK1}
I created a parameter and pass the values to another page.
In the another page, which is this: {LINK2}
The URL parameter values will be pre-loaded on the select tags.
I look up in this finsweet article:
https://www.finsweet.com/cms-library/add-ons#add1
That It’s possible to use this.
But I’m using select fields and haven’t found any resources that matches the functionality that I want to achieve.
I tried the finsweet attributes Filter but it only works on 1 collection list. I have 4 Collection List that needed to be filter with only using two select tags [countries, cities].
Live links to re-create the scenario only:
Under (Tell me the Rules Form Section) // creating the url parameters and pass it to another page
https://ride-beam-v2.webflow.io/rider
// getting the url parameters and set it to the 2 select tags
https://ride-beam-v2.webflow.io/beam-safe-academy
So to finalize, I only want to pre-load the filters if the parameter URL exists in that page.
If anyone, knows jquery or how finsweet cms library works or how filter is loaded into the DOM Elements and can guide me to the issue. It would be a great help not only to me but also to other Webflow developers that’s having the same issue as mine.
To begin with, I'm fairly knowledgeable with both html5 and css3. Right now I'm trying to create a website that allows visitors to edit website content so that all visitors are able to see the edits. I know about contenteditable but this attribute does not last when the page is refreshed and no other visitors to see the edits. For example:
<p> Edit me please </p>
A visitor would be able to edit the element above by visiting the website and simply selecting and typing. Also I have heard that javascript, jquery, sql, and php can all allow visitors to edit website content but I don't know which is the best.
To sum up, if anyone knows how to allow visitors of a website to edit its' content it would be much appreciated to share their knowledge.
Create a database table (lets call it "strings") , and just define 2 columns - "string_identifier" and "string_value"
When you render the page, simply query the database to fetch the strings and their identifiers. Each editable element should have an attribute containing its identifier.
You can use jquery to capture the click event on all editable elements, and replace it with an input with that text.
Then assign an event handler to that input, so when the enter key is pressed, it sends a request to a php script (with the identifier and new string as data) on the server to update the database with the new string.
If you would like live updates to all other clients (no need to refresh), use jquery to continuously request a file on the server (endless loop), which will return a JSON object containing all the strings. Then go through and replace the text of all editable elements on the data with the new strings you have received from the server.
I am creating a music player, and each track have a share button. The following is my method for sharing:
Share on Facebook
So I want to give this share button specific image, and description. As far as I know the Facebook meta tags must be located in the header of the page. So how can I have various meta tags for each track that I am sharing?
If you have a list of tracks in a view model / data object of sorts, I would suggest iterating over them, generating meta tags, and inserting them into your header. Your meta data does not have to be in line with your share button (as you alluded to in your question).
If you have multiple tracks on the page, it makes sense that you would have multiple meta tags.
Perhaps you need a feature in your app that segregates songs allowing you to present a "song page" where you could be specific with your meta data. This would have the advantage of displaying all details appropriately when shared.
I suggest you check out the developer reference for object types and structure your tags appropriately.
https://developers.facebook.com/docs/reference/opengraph#object-type
One might also think to use jQuery / Javascript to conditionally add / remove tags.
This is unlikely to work:
Is it possible to use javascript to change the meta-tags of the page?
Outside of the generic reference facebook also has open graph music, which appears to be restricted to approved partners only, but may be worth a look : https://developers.facebook.com/docs/opengraph/music
I'm playing around with Google Chrome Extensions and wanted to make one where you fill out a form beforehand. Then whenever, a certain URL is opened, it fills in the information you filled out. I can save the information, and track the tab URL with one of Google's packages. However, when the URL is loaded, how can I tell what form to put the saved strings into? I know how to use var.document.getElementById(""), and can see the ids when I inspect element, but since it's not my webpage, I can't link it to my JavaScript file, so it doesn't help. I've seen this been done before but just can't find the right tools. Any guidance to an answer would be appreciated.
I researche it quite a bit, and thus it seems simple, I couldnt find the answer.
So I have a website that has different articles,each with a custom facebook share button. Every time the user wants to share, I activate javascript sdk and it works. However it shares the opengraph tags that are defined in the header. How would I do that dynamically ? I want to share the specific content of the article ? Is opengraph the right way ?
I assume that your use case is something like the main page in a blog,
where you wish to display several articles in the same page,
and have a like button for each one.
However, the way Facebook crawls your page, it looks at the open graph meta tags for this main page only.
You wish for each of the share buttons to be specific to each post instead.
Have a read of the instructions on this page
In your situation, her is what you will need to do:
Set the data-href attribute of the individual page that the share button is for
For the individual pages, set the open graph meta tags appropriately
This way, when facebook queries your page open graph meta tags, it will not do so on the main page, but instead on the pages you have specified.
Another approach, that will give you more fine grained control, would be to use Facebook's Javascript SDK.
The one that you are looking for, in this case, would be the Share Dialog.
Essentially, here you create your own buttons by hand, and trigger the Facebook Share API using Javascript manually too.