I am posting custom action with facebook open graph api and I am successfully posted that on my timeline with facebook c# sdk.
Here is my action code
curl -F 'access_token=AccessToken' \
-F 'job=http://samples.ogp.me/476622222351784' \
'https://graph.facebook.com/me/sajidap:apply'
Here is my object code
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# sajidap: http://ogp.me/ns/fb/sajidap#">
<meta property="fb:app_id" content="APPID" />
<meta property="og:type" content="sajidap:job" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample Job" />
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
I am posting in this way.
var fb = new FacebookClient(AccessToken);
var parameters = new Dictionary<string, object>
{
{ "og:type", "sajidap:job"},
{ "og:url" , "http://www.google.com"},
{ "og:image", "http://www.theappdynamics.com/images/babafooka.jpg" },
{ "og:title" , "Arslan Job"},
{ "job" , "http://samples.ogp.me/476622222351784"}
};
var Response = fb.post(me/NameSpace:ActionName,Parameters);
Its posting an activity on my timeline but its showing Sample activity of an object that is like this url http://samples.ogp.me/476622222351784
How I can give my own url, image and title of that object by passing with parameter dynamically from C#.
Please guide me on this thing
Its Simple i have done this. You have one page like that which have your Open graphs tags in it like this. Mean It should be some content page on your web.
Let me clear more.. Like I have one resturant and I am selling some chicken burgers and I want to make one action "Buy" Mean In facebook it should be like this Arslan buy chicken lawa on link.
In This Arslan is user who performed the action
And Action is buy
And Object was chicken lawa
And URL is my below page who have all open graph tags in it to show in feeds.
Here is ASPX Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# myapp: http://ogp.me/ns/fb/myapp#"> // Your app name will be replaced with this "myapp"
<title>Buy Falafeel</title>
<meta property="fb:app_id" content="4735" /> // Your APP ID
<meta property="og:type" content="myapp:falafeel" /> // YourAppName:Action Type
<meta property="og:url" content="http://demo.anything.net/buy.aspx" />
<meta property="og:title" content="Chicken Lawa Falafeel" />
<meta property="og:image" content="http://www.theappdynamics.com/images/babafooka.jpg" />
</head>
<body>
<form id="form1" runat="server">
<div>
This is Falafeel Page. Demo Demo......
</div>
</form>
</body>
</html>
Here I am Performing The action on button click from my code behind.
void PostAction(string URL, string Token, string Action, string objects)
{
var fb = new FacebookClient(Token);
var parameters = new Dictionary<string, object>
{
{ objects , URL}
};
try
{
dynamic result = fb.Post("me/myapp:" + Action, parameters); // again here should be your app name instead of "myapp"
}
catch { }
}
PostAction("URL", "AccessToken", "Action", "Object"); // Here is The Above Method Call
// Here is URL That URL Who Have Open Graph Tags Like we have created one page with tags named buy.aspx and it should be full link like "http://xyz.com/buy.aspx"
//Access Token Of User On Behalf we are going to create This Action
//Action The One Created On facebook App Setting Of OpenGraph Tag Like "Buy"
//Object That We Also Created On Facebook App Setting For OpenGraph Like "ChickeLawa"
Just publish an action with your object set to the OG URL of your object, as described here: https://developers.facebook.com/docs/opengraph/actions/#create
Anything else (picture, title etc.) will be fetched from the og:tags of the URL.
Related
I have a complete website built with React for frontend and NodeJs + Express for backend. My need is to have dynamic OG (Opengraph) Tags for a specific route, which used by specific component.
Since it will be difficult to me to convert this component to SSR, because it's a dynamic component that also used for another page such as real time component (that changes as the user input) so I don't think it should be rendred with SSR, I came up with idea that I don't know if it's possible, and it's to render only meta tags as SSR.
This is relevant code:
Frontend - React:
The route:
<Route exact path="/DigitalCard/:cardId" component={DigitalCard} />
This is DigitalCard Component:
export default class DigitalCard extends Component {
constructor(props) {
super(props);
this.state = {
card: null
}
}
componentDidMount() {
const cardId = this.props.match.params.cardId;
axios.get(serverApiUrl + '/' + cardId)
// response.data is server's api as json
.then(response => this.setState({ card: response.data }))
.catch(...);
}
cardFactoryByDesign = (card) => {
// Create the design of the card, Uses eventually a lot of help components.
}
render() {
let card = this.state.card;
return (
<MetaData
name={card.Name}
description={card.Name}
ogUrl={clientUrl + "/" + card.cardId}
imgUrl={card.CardImage}
/>
{ this.cardFactoryByDesign(card) }
)
}
}
And this is MetaData Component:
import Helmet from "react-helmet";
import MetaTags from 'react-meta-tags';
export default function MetaData(props) {
const [meta] = useState({
name: props.name,
description: props.description,
ogUrl: props.ogUrl,
imgUrl: props.imgUrl
});
return (
<>
<MetaTags>
<meta name="title" content={meta.name} />
<meta name="description" content={meta.description} />
<meta property="og:title" content={meta.name} />
<meta property="og:image" content={meta.imgUrl} />
<meta property="og:description" content={meta.description} />
<meta property="og:url" content={meta.ogUrl} />
</MetaTags>
<Helmet>
<title>{meta.name}</title>
<meta name="title" content={meta.name} />
<meta name="description" content={meta.description} />
<meta property="og:title" content={meta.name} />
<meta property="og:image" content={meta.imgUrl} />
<meta property="og:description" content={meta.description} />
<meta property="og:url" content={meta.ogUrl} />
</Helmet>
</>
);
}
Backend - Nodejs + Express:
router.get('/:cardId', async (req, res) => {
try {
let visitCard = await VisitCard.findOne({ _id: req.params.cardId });
if (visitCard)
return res.status(200).json(visitCard);
else
...
}
} catch (error) {
...
}
});
This is my existing code so far.
Now, I'm asking if I can do something like this in my backend:
const pathToIndex = path.join(__dirname, '../views/metaTags.html');
router.get('/getCardMetaTags', (req, res) => {
const TITLE, DESCRIPTION, IMAGE, URL = ...
res.send('index', { title: TITLE, description: DESCRIPTION, image: IMAGE, url: URL }); // Not Quite sure if send / render / anything else
})
And inside metaTags.html write with html the <head> section with all of the meta tags, and when I request the API on the client side, I will also send somehow this section.
Is this possible or anyone have better idea? Thank you !!
Unfortunately it will not be possible to do this without SSR. Simply because Facebook / Twitter / Google crawler will not execute the api call. What you have to remember is that React app in reality have only one route and one html file (the one with <div id="root"></div>), the JS takes over and feeds the browser the selected components. Everything happens at the browser / client level, and since crawlers do not execute the JS (only google but not at first crawl, plus you have to add robots.txt, sitemap), they only will see the html template you use for your React app.
That is way you have Gatsby.js (SSG) and Next.js (SSR and SSG) frameworks. React in itself has no SEO support, you may see the metadata loaded in the browser but is dynamically added by JS.
I am following https://help.twitter.com/en/using-twitter/embed-twitter-feed for embedding timeline in the angular page. Only button renders but not the actual timeline.
The index.html looks like:
<body style="margin:0">
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<app-root></app-root>
</body>
app.component.html looks like below:
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
A Twitter List by TwitterDev
</a>
Also tried things like app.component.ts:
ngOnInit(){
if ((<any>window).twttr.ready())
(<any>window).twttr.widgets.load();
}
But no luck
you need to load widgets.js script after twitter-timeline element is been render so if you place the script in index.html it is will load and the element hasn't render yet.
🌟 the best way around it is to create a script tag dynamically after the element is rendered.
twitter component
export class TwitterComponent {
#Input() user:string;
constructor(private renderer2: Renderer2,private el: ElementRef) {}
ngAfterViewInit() {
let scriptEl = document.createElement('script');
scriptEl.src = "https://platform.twitter.com/widgets.js"
this.renderer2.appendChild(this.el.nativeElement, scriptEl);
}
}
template
<a class="twitter-timeline" href="https://twitter.com/{{user}}">Tweets by {{user}}</a>
app componenet template
<app-twitter [user]="name"></app-twitter>
angular twitter widgets ⚡⚡
ngAfterViewInit() a lifecycle hook that is called after Angular has fully initialized a component's view.
Updated 🔥🔥
a simple soulution mention in this answer before by user named Bernardo Baumblatt
put the script link in the index.html
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>
load the twitter widgets when ngAfterViewInit method call
ngAfterViewInit() {
// #ts-ignore
twttr.widgets.load();
}
in any case the script has not loaded yet you will got an error like 🆘 twttr is not defined 👉 so download the widgets.js script and include it to your project by using import
main.ts
import './app/widgets.js'
demo 💥💥
I had a requirement of dynamically rendering timelines based on different twitter timelines.
I found a workaround by creating a variable in the constructor that stores the href based on the twitter username .
So for example if your link is "https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw"
, you just put this in the constructor in a previously defined global variable , say "embedLink"
such as in your ts component:
#Component({
selector: 'app-tree-dashboard',
templateUrl: './tree-dashboard.component.html',
styleUrls: ['./tree-dashboard.component.css']
})
export class TreeDashboardComponent implements OnInit,AfterViewInit {
embedLink='';
constructor(private matIconRegistry: MatIconRegistry,
) {
this.embedLink= "https://twitter.com/TwitterDev/lists/national-parksref_src=twsrc%5Etfw"
}};
and then in your HTML :
<a class="twitter-timeline" href={{embedLink}}></a>
And lastly you only need to add the script in index.html which you have done already.
So you're good to go!
Below is my code. I'm creating blank website so I think it's should not be a problem. What I think is maybe the order of the script in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Twitter</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>
</html>
In my app.component.html
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
A Twitter List by TwitterDev
</a>
You can view my code here
I an following THIS tutorial and everything works fine but I want to modified that in my application. In my app I want to remove some HTML tag from my HTML view for that I save the whole HTML code of the webPage into a string now I want to modify that string like I want to remove some tags from It but I don't have any Idea that how can I remove some specific tags from that string and I have following code from that tutorial:
func loadTutorials(){
var tutorialsUrl : NSURL = NSURL(string: "https://developer.apple.com/library/mac/documentation/Swift/Conceptual/Swift_Programming_Language/TheBasics.html#//apple_ref/doc/uid/TP40014097-CH5-XID_467")!
var tutorialsHtmlData : NSData = NSData(contentsOfURL: tutorialsUrl)!
var string = NSString(data: tutorialsHtmlData, encoding: NSUTF8StringEncoding)
println(string!)
// var tutorialsParser : TFHpple = TFHpple(HTMLData: tutorialsHtmlData)
//
// var tutorialsXpathQueryString:String = "//div[#class='content-wrapper']/p[#class='header-text']/a"
//
//
//
// var tutorialsNodes : Array = tutorialsParser.searchWithXPathQuery(tutorialsXpathQueryString)
//
// var newTutorials : NSMutableArray = NSMutableArray(capacity: 0)
//
// for element in tutorialsNodes as [TFHppleElement]{
//
// // 5
// var tutorial : Tutorial = Tutorial()
// newTutorials.addObject(tutorial)
//
// // 6
// tutorial.title = element.firstChild.content
//
// // 7
// tutorial.url = element.objectForKey("href")
// }
}
from this Link I want to remove below meta tags from the HTML:
<meta id="g-version" name="g-version" content="7fcbb0a2" />
<meta id="j-version" name="j-version" content="1.2.0" />
<meta id="build" name="build" content="60068c96635318099c2acaff2a2b2e00" />
<meta id="document-version" name="document-version" content="2.1.8" />
<meta id="book-assignments" name="book-assignments" content="{Type/Guide}, {Topic/Languages & Utilities/Swift}" />
<meta scheme="apple_ref" id="identifier" name="identifier" content="//apple_ref/doc/uid/TP40014097" />
<meta id="chapterId" name="chapterId" content="TP40014097-CH5">
<meta id="book-title" name="book-title" content="The Swift Programming Language" />
<meta id="book-resource-type" name="book-resource-type" content="Guide" />
<meta id="book-root" name="book-root" content="./" />
<meta id="book-json" name="book-json" content="book.json">
<meta id="date" name="date" content="2014-10-16" />
<meta id="description" name="description" content="The definitive guide to Swift, Apple’s new programming language for building iOS and OS X apps." />
<meta id="IndexTitle" name="IndexTitle" content="" />
<meta id="devcenter" name="devcenter" content="<!-- DEVCENTER_NAME -->" />
<meta id="devcenter-url" name="devcenter-url" content="<!-- DEVCENTER_URL -->" />
<meta id="reflib" name="reflib" content="<!-- REFLIB_NAME -->" />
<meta id="xcode-display" name="xcode-display" content="render" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
But I have no Idea that how can I achieve this.
Here is my source code.
I have asked question on It is posible to load customise HTML view into webView in swift? but This time I want to achieve this programatically.Any solution for this?
Try this , Its working fine in swift for remove html
let html: String = webView.stringByEvaluatingJavaScriptFromString("document.documentElement.outerHTML")!
do {
let regex:NSRegularExpression = try NSRegularExpression( pattern: "<.*?>", options: NSRegularExpressionOptions.CaseInsensitive)
let range = NSMakeRange(0, html.characters.count)
let htmlLessString :String = regex.stringByReplacingMatchesInString(html, options: NSMatchingOptions(), range:range , withTemplate: "")
print("Html Printing For payment \(htmlLessString)") jsonParsingOfWebviewReturn(htmlLessString)
} catch {
// report error
}
It can be done easily with SwiftSoup:
var htmlString // your html
let doc = try! SwiftSoup.parse(htmlString) // init SwiftSoup object
doc.select("meta").remove() // css query to select, then remove
try! htmlString = doc.outerHtml() // get the modified html
The easiest way would be to use NSRegularExpression. This allows to find "<meta[^>]*>" and replace it with a null string. This works in most cases. Note also that the above regex is just a quick and dirty one which I sketched right out of my mind.
A more secure way would be to use a XML parser. But in that case you might fail as many HTML sources are not XML compliant.
Here's a quick implementation which is not perfect (as suggested, you can also use regular expressions to achieve this), but works. I've had to change link from your code to another site because it've raised an exception (likely because developer.apple.com requires authorization).
func loadTutorials() {
var tutorialsUrl: NSURL = NSURL(string: "http://rinatkhanov.me/")!
var tutorialsHtmlData : NSData = NSData(contentsOfURL: tutorialsUrl)!
var input = NSString(data: tutorialsHtmlData, encoding: NSUTF8StringEncoding)
let lines = input?.componentsSeparatedByString("\n") as [String]
var result = ""
for line in lines {
if !line.hasPrefix("<meta") {
result += "\n" + line
}
}
println(result)
}
It simply iterates over lines and eliminates ones that have opening meta tag.
I need to get all guids in an Entity by using Javascript crm 2011?for Ex:I have the Entity called Contact.In that contact Entity ther is an 5000 records.I need to get alll 5000 guid in a Javacript .
How to do this?
OData is limited to 50 records. To Retrive more than 50 records we have to use Paging
kindly check this RetrieveRecords
For a "bulk Get" you can try This solution
To get just one guid, you can use Web Resources(Simple HTML page).
<!DOCTYPE html>
<html>
<head>
<script>
function RetreiveGuid()
{
var guid = window.parent.Xrm.Page.data.entity.getId();
var cleanGuid =guid.replace(/{/g,"").replace(/}/g,"");
var entityName = window.parent.Xrm.Page.data.entity.getEntityName();
document.getElementById("demo").innerHTML = entityName + " : " + cleanGuid;
}
</script>
</head>
<body>
<h4>Using Web Resources to Get Guid</h4>
<p id="demo"></p>
<button type="button" onclick="RetreiveGuid()">Get Guid</button>
</body>
</html>
i'm trying to get the player view working for an artist, but bar hacking around/manually reimplementing is there a better way to do this. below is the code that i have tried so far, taken from a stack overflow regarding the same thing for albums.. There is two problems with this, one the image doesn't show up/fallback to the album and two, when you try and play you get "Uncaught TypeError: Object Tin Hat Trio has no method 'get' "
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sp://import/css/eve.css">
<link rel="stylesheet" href="sp://import/css/api.css">
</head>
<div id="artist-element"></div>
<script>
var sp = getSpotifyApi(1);
var views = sp.require('sp://import/scripts/api/views');
var models = sp.require('sp://import/scripts/api/models');
models.Artist.fromURI('spotify:artist:5spC5WtEkxDbaIH7bGGX4m', function(artist) {
var p = new views.Player();
p.context = artist;
document.getElementById('artist-element').appendChild(p.node);
});
</script>
</body>
</html>
The player object can only have a context of type Album or Playlist. Documentation here.