[分享] 梗圖產生器 - 網站嵌入程式碼

[poopoo888888 (阿川)]

大家好 小弟近期在研發梗圖產生器

https://memes.tw/maker

最近想開發「嵌入」功能 讓梗圖產生器可以嵌入在外部網站

類似「youtube 嵌入影片」那種功能

最近稍微搞懂原理，就是提供一段 html tag + script tag 給第三方

對方貼上之後 由 js script 動態把一個 iframe 附加到對方網站上

然後 iframe 內外溝通 iframe 寬度、高度 等等基本屬性 就可以實作出 plugin 效果

下面是小弟最近的成品

只要在網站上貼一段程式碼 就有梗圖產生器可以用了 XDDDD

```
<div class="memes-maker" data-id="270"></div>
<script>
    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://memes.tw/embed.js?ts=' + new Date().getTime();
        (d.head || d.body).appendChild(s);
    })();
</script>
```

更多範例如下

https://memes.tw/maker/how-to-use-plugin/270

https://memes.tw/maker/how-to-use-plugin/1888

https://memes.tw/maker/how-to-use-plugin/2878

跟大家分享一下，歡迎大家玩玩看！

有什麼意見想法可以再跟我說，謝謝！

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.44.198.156 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1614412586.A.69F.html
→ superpandal: Soft Job...
→ MOONY135: 分享作品難道不算在求職過程之中（？）沒有違反樓上認為
→ MOONY135: 想要的邏輯阿？三篇都推一樣的文到底是？
→ superpandal: 那麼他應該要詳細標明 誰知道他用途是什麼 可以懷疑
→ superpandal: 是政治相關在維護的工具
推 WaterLengend: 你先說明一下你三篇文都留一樣的言是怎樣吧
→ superpandal: 這還需要說明嗎？ 不是很淺顯嗎 貼了只是Soft Job而
→ superpandal: 已
→ MOONY135: 可以懷疑或者還要幫你過濾？你是打算把判斷力外包了嗎
→ WaterLengend: 那梗圖產生器是哪裡讓你有理解障礙？不是很淺顯了
→ WaterLengend: 嗎，就是梗圖產生器而已。
→ superpandal: 疑似的很多 而且重點是他也沒說他用途 寫Soft Job實
→ superpandal: 屬正當判斷
→ superpandal: 本版的名稱你自己讀一下 haha
→ WaterLengend: 說真的沒人看得懂你想表達什麼意思，我也送你個soft
→ WaterLengend:  job好了，來鬧版的ZZ
→ superpandal: 裝看不懂吧 這與求職、職場有什麼相關 有相關要說明
→ superpandal: 阿 haha 看以往的回覆 我是來鬧版的嗎? ha
→ online135: superpandal大先來一篇參考看看吧
→ superpandal: 參考很多 你上面翻就一堆 當你個版？ ha
→ WaterLengend: 沒前後文跟上下敘述，什麼叫疑似的很多？我看你真
→ WaterLengend: 的國文是體育老師教的。
→ online135: 原來是寫不出文章的朋友
→ superpandal: 其他人要懷疑什麼不用我來管 他寫的用途有與Soft Job
→ superpandal: 有關嗎 到底誰國文有問題？ haha
→ superpandal: 寫文章可以 但我不想寫 我要不要寫其他人管的著嗎?
→ online135: 沒有人可以管你喔 :) 您自己判斷即可 不用充滿殺氣
→ superpandal: 平鋪直敘殺氣重？ ha
推 online135: 您說的對
→ online135: 您都是對的
→ superpandal: 是啦 這年頭說實話也不行 不堪實話會說殺氣重
→ online135: 沒有沒有 您沒有殺氣重 我錯 您是對的
→ superpandal: 我原諒你 因為我想你只是誤判 沒什麼大不了
→ online135: 對 我誤判 您是對的 您最優秀了
→ superpandal: 我不優秀 只是不會暗渡陳倉
→ superpandal: 然而優不優秀不影響發言合不合理 覺得合理我就推
推 valeria0929: 推文整個歪掉
→ superpandal: 有人要歪 我也沒辦法 他們其實也可以無視 只是我繼續
→ superpandal: Soft Job
→ WaterLengend: 國文不是很會，豪洨倒是蠻會的。
→ MOONY135: 有沒有用要看你站在什麼立場，是原po即將面試的面試官或
→ MOONY135: 者是現任主管（？）如果都不是，「有沒有用」有沒有用?
→ superpandal: 然後呢 請你證明此篇與找工作有關 來證明別人國文差
→ superpandal: 整篇都沒有說明自己寫這個有無找工作意圖 只有看到要
→ MOONY135: 我不接外包喔
→ superpandal: 別人如果有建議可以聯絡他
→ superpandal: 沒有要你接外包 請某人回應
→ MOONY135: 「我認為這東西有問題」所以你要證明他沒有問題給我看。
→ superpandal: 我提出來這篇與版主題無關 有異議的請證明有關 當然
→ superpandal: 無視也可以
推 Saaski: 有些兇宅就這樣，習慣就好
→ superpandal: 這裡有人很兇嗎？ ha
推 kuochuwon: 感覺好像看到小學的風紀股長在糾察別人違反班規耶XD
→ superpandal: 你覺得是糾察 我覺得是提醒 可以無視沒有問題 XD
推 cokellen: 有人靠這些程式技術賺錢，不就是Job?
推 WaterLengend: 你已經幫你自己證明了，給你個推
→ superpandal: 依照你這樣說 這不就是一種廣告？ 而且這篇探討了什
→ superpandal: 麼營運問題?
→ superpandal: 我幫我自己證明我看法沒錯 ha
推 soccer103: 推 很常用梗圖產生器和原 po 的咖啡網站
推 soccer103: 另外原 po 有附上程式碼
→ soccer103: 這梗圖產生器 side project 也有廣告（雖然可能能回饋
→ soccer103: 的錢不多）
→ soccer103: 硬要上綱的話也能說有一點點商業模式
→ soccer103: 在我看來有符合 Soft job 呀
→ MOONY135: 如果你分享有用的文章分享到有人願意請你去工作這種廣告
→ MOONY135: 沒什麼問題啊？既然有人覺得有用那麼他也得到好處了。
→ superpandal: 樓上看來是你們的推廣對象 ha
→ superpandal: 就是商業阿 有什麼問題 不論這篇文或者網站 你要徵人
→ MOONY135: 他之前那篇git就是覺得要他覺得有關才符合softjob的定義
→ MOONY135: 。每個人心中都有一個softjob
→ superpandal: 你也要貼徵人條件
→ MOONY135: 我其實聽不懂你要表達什麼，但我還是不接'判斷力'外包。
推 LordCHTsai: 做這行就是要不斷吸收新知，技術性文章當然有助工作
→ superpandal: 你推廣的Job不是Soft Job 這才是無限上綱吧
→ superpandal: 誰管你接不接 這四不像的文有人噴也是正常
→ MOONY135: 只有你在噴
→ superpandal: 牽拖技術文章找工作 那你來意就應該講清楚 這是你的
→ superpandal: 解釋 不是他的原文
推 LordCHTsai: 無視他比較快，反正他也沒有裁量權，讓他開心嘴 :)
→ superpandal: 只有我噴 不代表其他人就認同 haha 我也是人
→ superpandal: 看了版規再看回這篇 這完全就是Job無限上綱 牽拖的人
→ superpandal: 說人牽拖
→ superpandal: 所以說上篇的睜一隻眼閉一隻眼就這意思 ha 這是在嘴?
推 alihue: super 真無聊，你覺得不符本版就另開討論串阿
→ alihue: 還是你覺得每個主題都要開一個版不能在總版討論?
→ superpandal: 從頭到尾就沒有要討論 你是誤會什麼？
→ WaterLengend: 你繼續阿甘勝利法吧，蛇蛇
推 alihue: 沒要討論這串留這麼長在幹嘛? 傲嬌逆
→ superpandal: 對著版規和Soft Job說 到底誰阿甘？
推 sanpf: 其實你出來選板主…
→ superpandal: 這不就是版主問 為版主解答 有人要在下面討論干我屁
→ superpandal: 事
→ superpandal: 我沒那麼有空 上線時間也沒那麼固定 裁決權不在我我
→ superpandal: 認
→ WaterLengend: 去report plz 而且前面我是在舉證你叫我舉證的，還
→ WaterLengend: 能說自己是對的看來我才說對的 lol
→ superpandal: 你舉了什麼？ 其他人回答很牽強阿 不然呢 ha
→ WaterLengend: 我是在叫你去report我，搬板規出來就去讀熟一點，
→ WaterLengend: 最好讓我永桶那種。沒人在跟你討論其他人，你邏輯
→ WaterLengend: 跟記憶是不是錯亂把我當成別人？
→ superpandal: 就是你沒舉證阿 重點是你沒舉證阿 別人回的是你的答
→ superpandal: 案嗎？ 我沒有要桶誰 你可以仔細看下這篇
推 WaterLengend: 好啦我等你去report，懶得跟你吵別的，等你成功記得
→ WaterLengend: 寄信笑我。
→ superpandal: 我本來就不是要report ha
推 jackflu: 酷喔 幫推個
推 tnfshjcc: 推一個有趣的side project 怎麼會跟職涯無關呢
→ tnfshjcc: side project在soft_job裡面還算很重要
→ tnfshjcc: 我的most like/dislike leetcode也得到github上面20追蹤
→ tnfshjcc: 還會有人回報issue叫我更新XD
推 qwe70302: 這種明顯的亂版仔要不要乾脆桶一桶
推 taipoo: 推分享
推 tnfshjcc: 不刷題不做side project然後在這邊當soft job警察 好笑
推 tbpfs: 其實已經違反板規3了 勿連續推相同語意與類似文章與推文
→ tbpfs: 可以捅了
→ MOONY135: 第一次只能警告
→ jasonwung: 只看內文我也覺得跟 Job 沒什麼直接關係
推 YahooTaiwan: 跟 soft job 無關+1
→ YahooTaiwan: side project 都能貼上來的話，樓上幾位認真做 side
→ YahooTaiwan:  project 的大大不就要洗版了？
推 SmallDruid: 奇怪 這版的風氣何時變成只能討論跟純粹討論軟體工作
→ SmallDruid: 或職缺有關了嗎 分享一些小工具或有趣的軟體我覺得還
→ SmallDruid: 行吧 難道這邊要變成只能貼職缺文嗎
推 umum29: 記得好幾位大神會分享技術文章 沒什麼不好的啊
→ umum29: 要桶的話 一堆很棒的技術文章也請一起喔
→ MOONY135: 其實沒有喔 只有他在堅持心目中的應該是怎樣的
→ MOONY135: 看文件跟找技術文章 本來就是軟工日常 分享自己寫的工具
→ MOONY135: 沒甚麼問題吧
推 new122851: 一樓政治操作笑死
→ superpandal: 這本來就四不像的文 你直接分享就好還講那麼多做什麼
→ superpandal: side project我有只是不分享 ha
→ MOONY135: ............
→ superpandal: 這已經不光是分享文 看清楚就知道
→ superpandal: 還扯說什麼跟職涯有關 這裡是人力銀行嗎？ 需要在這
→ superpandal: 裡展現這些東西？
→ superpandal: 什麼政治操作？ 本來就會說會這樣建議 ha
→ superpandal: 這裡不是人力銀行也不是培訓班也不是你的商品仲介外
→ superpandal: 加其他原因混合
→ superpandal: Job詞無限上綱就是這樣
推 guanting886:  https://i.imgur.com/YgJ3Kqc.jpg
→ superpandal: 這有什麼好羨慕的 依照我的想法應該是自己做一個不分
→ superpandal: 享
推 gmoz: 住海邊喔?