Transfer custom text on Facebook using like button - javascript

Here's the thing.
Recently I've tried to add FB like button to some website I'm administrating and that was easy, but now I have a request I don't know how to handle.
The thing is, when you like some website, on your FB wall is posted a link (and some other stuff maybe) to that website, its by default and I know I can change that.
What I need is this, on my page I have a (html)div that is loaded dinamycally with some important data and I need to post that particular data on my FB wall.
I tried using javascript and open graph meta tags but it seems to me that these meta tags cannot be changed dinamycally.
If anyone has an idea how to do this, feedback is more than welcome.
Sincerely,
Milos

No, you technically cannot do this.
When you share a link on Facebook, Facebook servers visits the URL specified on sharing, collents META information and displays those.
However, Javascript runs after content is loaded and on browsers, and I don't think Facebook servers run javascripts before getting META information.
Therefore, even if you change Open graph meta tags dynamically, FB still uses old tags (which is set on initial page load).
You should figure out a way to set content before sending HTML to client.

I found a solution to this issue. This can be done using iframe to integrate FB like button. Piece of infrormation you need to do this can be found here.
It shows the FB like button and you can add your url in without having to mess up with meta tags

Related

Dynamically Supplying Metadata for Social Preview Cards

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.

Getting GTM code working on web application

Our company uses a third party service for our career/job site, allowing users to submit applications for job postings. Initially, users land on an external facing platform which integrates nicely with GTM. Within the CMS, you can easily add GTM code to the header and body area. However, once a user clicks 'apply' on a job description, they're redirected to a web application, which is essentially a separate system. Unfortunately, this second system does not allow you to add code to the header or footer. I am, however, able to add code to the "thank you" page which users see when they submit an application.
On the "thank you" page, the only way to insert the GTM code is using a WYSIWYG. You cannot insert the code into the <head>, but you can insert it into the <body>. I know it's not ideal, but it's the only option.
Even though I can get the code to render on the page, it's not working at all. It's not recording pageviews, Google Tag Assistant doesn't see the code, and Google's GTM toolbar doesn't show up when the GTM container is in preview mode.
From what I can tell, the page does not refresh when a user submits an application. Thus, I'm assuming that is the reason why the tag is not working. I've tried using a number of different triggers, based on advice I've read online, but none have solved the issue.
I'm just using the standard GTM code, but I'll post my code below anyways:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','###');</script>
<!-- End Google Tag Manager -->
NOTE: I'm also utilizing the <noscript> code immediately after the <script> code.
It would appear that the site you are trying to inject GTM into, takes steps to prevent you from adding JavaScript into their page.
This is a very common security measure on sites that allow users to add content to pages, as instead of GTM you could add something that attacks their server or place a bitcoin miner on the page.
https://en.wikipedia.org/wiki/Code_injection
Your only solutions to this is to ask your provider to support GTM directly, or if your lucky you may find the <noscript> version does work and that might be enough to meet your requirement.

Modify FB page plugin on my website

Hi Happy New Year and thanks in advance for your time..
So im using Facebook javascript SDK to display my FB page on my site. Its showing up as expected. Good.
Now I want to alter the Fb page title after it has loaded in my site. I tried getElementByClassName in javascript. But no effect(may be because of iframe?). This is the actual pic
And this is what i desire -- the fb page plug-in title has been changed.
Is it possible to achive this??
No, it is not possible.
The iframe content is from a different domain, and therefor the Same Origin Policy prevents you from accessing its content via JavaScript from your site.
Finally found a work around for the requirement. It is not possible to modify the page Pugin but -
use php sdk to initialise Facebook and
Use open graph to fetch the posts.
Now you can use this data as you like
By this method even individual posts can be tailored accordingly.
A working example is at -
http://callmenick.com/post/displaying-a-custom-facebook-page-feed

Deep linking javascript powered websites

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/

display twitter compose tweet pages through an iframe

so i have kind of a strange problem, I am in the process of building my own tweet button which is simple enough just using a link that resembles this <a href="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE">
now this as a link works just fine even with the dumby data prvided the problem is i would really like this page to open in an iframe on my site.. but twitter and other social networks have disabled this capability I am woundering if anyone know's a way i can use some sort of iframe or other tech including I assume an oauth and api which will alow me to send write, and display a tweet that the user can send inside my sight ?
as just using this returns an empty frame
<iframe src="http://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE">
</iframe>
anyhelp on how or even if I can do this or even a site I can check out that allows me as a user to do this would be greatly appreciated
(just a note I dont wish to tweet on a user behalf but rather display a pre defined text's tweet that enable the user to send without leaving my site or opening a new window )
Seems like it's against their terms of service. I'm researching the same issue now and it looks like you need to setup 0Auth to get an access token and then use the API. I'll report back when I have the full answer.

Categories