Jump to content

"Embed" de redes sociais CKEditor


cdmafra
 Share

Recommended Posts

Boas.

Não costumo fazer "embed" de redes sociais nas minhas publicações, mas hoje foi uma das raras vezes e recordei-me do problema antigo. Uso o CKEditor como editor WYSIWYG. Contudo, e apesar de ter inclusive um plugin próprio para inserir tweet, por exemplo, não insere como eu gostaria. Abaixo, a primeira imagem é como me sai, a segunda é como eu gostaria que saísse.

Imagem 1 - como me saem os "embed" de redes sociais

Bxxd2PW.png

Imagem 2 - como gostaria que saíssem.

EE2eoCS.png

Link to comment
Share on other sites

Boas. Obrigado, ajuda noutras coisas, mas não no que pretendo. O que eu pretendo é fazer "embed" de qualquer perfil de Twitter...eu penso que isso se faz através da API oembed, só não percebo como a implementar...

Link to comment
Share on other sites

fteixeira1993

pretendo é fazer "embed" de qualquer perfil de Twitter...

Não estou a conseguir perceber esta parte :|, queres mostrar os tweets que fazem em alguém é isso?

cumps,

fteixeira1993

Link to comment
Share on other sites

@fteixeira1993

Cada tweet ou post no Facebook tem a opção "Incorporar". Por exemplo:

<blockquote class="twitter-tweet" lang="pt"><p lang="und" dir="ltr"><a href="https://twitter.com/hashtag/WRC3?src=hash">#WRC3</a> + <a href="https://twitter.com/hashtag/JWRC?src=hash">#JWRC</a>: Quentin Gilbert (Citroën) per partida doble <a href="https://t.co/8PE6jXMYWv">https://t.co/8PE6jXMYWv</a> <a href="https://twitter.com/hashtag/RallyRACC?src=hash">#RallyRACC</a> <a href="https://t.co/HiAPTOgzIf">pic.twitter.com/HiAPTOgzIf</a></p>— RallyRACC (@RallyRACC) <a href="https://twitter.com/RallyRACC/status/659787610177544193">29 outubro 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Cuja preview é conforme a primeira imagem abaixo; só que quando tento incorporar qualquer tweet ou post do Facebook no meu site aparece-me conforme a segunda.

1ª imagem

zXUz4TJ.png

2ª imagem:

Bxxd2PW.png

Link to comment
Share on other sites

fteixeira1993

Bom dia,

Já sei o que te falta para aparecer como queres xD, tens que adicionar o jdk deles como no facebook e colocas logo a seguir do <body> ou crias 1 ficheiro .js com este código e importas para as páginas onde queres por os tweets para facilitar nas páginas onde queres colocar os tweets ^^

<script>window.twttr = (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0],
   t = window.twttr || {};
 if (d.getElementById(id)) return t;
 js = d.createElement(s);
 js.id = id;
 js.src = "https://platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js, fjs);

 t._e = [];
 t.ready = function(f) {
   t._e.push(f);
 };

 return t;
}(document, "script", "twitter-wjs"));</script>
Link to comment
Share on other sites

Boas. Obrigado.

Entretanto descobri qual é o meu real problema: o CKEditor transforma o código automaticamente quando mudo de sourcecode para editor normal. Por isso, se submeter o artigo para a base de dados quando está em sourcecode, o tweet sai-me normalmente incorporado.

UPDATE: já consegui resolver no que respeita à apresentação do artigo ao leitor; falta agora resolver o mesmo para a apresentação dentro do CKEditor...

1. Código de incorporação do tweet

<blockquote class="twitter-tweet" lang="pt"><p lang="en" dir="ltr">With the most horsepower in its class, this plug-in hybrid may have you seeking out straightaways. <a href="https://twitter.com/hashtag/AudiA3?src=hash">#AudiA3</a> <a href="https://twitter.com/hashtag/etron?src=hash">#etron</a> <a href="https://t.co/LmmivjztzJ">pic.twitter.com/LmmivjztzJ</a></p>— Audi (@Audi) <a href="https://twitter.com/Audi/status/660109152174383104">30 outubro 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

2. O CKEditor transforma-o nisto automaticamente:

<blockquote class="twitter-tweet" lang="pt">
<p dir="ltr" lang="en">With the most horsepower in its class, this plug-in hybrid may have you seeking out straightaways. <a href="https://twitter.com/hashtag/AudiA3?src=hash">#AudiA3</a> <a href="https://twitter.com/hashtag/etron?src=hash">#etron</a> <a href="https://t.co/LmmivjztzJ">pic.twitter.com/LmmivjztzJ</a></p>
— Audi (@Audi) <a href="https://twitter.com/Audi/status/660109152174383104">30 outubro 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Edited by cdmafra
Link to comment
Share on other sites

fteixeira1993

Viva,

Colocando tudo num ficheiro html fica tudo ok... Suponho estejas a desenvolver algo tipo blog não? Desde que coloques o SDK na(s) pagina(s) que mostra os post's ou seja lá o que for, vai sempre aparecer como queres...

cumps,

fteixeira1993

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.